Question

我的gulp手表对css无效。我有以下配置：

var config = {
    port : 9007,
    devBaseUrl : "http://localhost",
    paths : {
        html : "./src/*.html",
        js : "./src/**/*.js",
        images : './src/images/*',
        css : [
          'node_modules/bootstrap/dist/css/bootstrap.min.css',
          'node_modules/bootstrap/dist/css/bootstrap-theme.min.css',
          'node_modules/toastr/package/toastr.css',
            "src/css/main.css"

        ],
        dist : './dist',
        mainJS : './src/main.js'
    }
};

我的gulp css任务是：

gulp.task('css', function() {
    gulp.src(config.paths.css)
        .pipe(concat('bundle.css'))
        .pipe(gulp.dest(config.paths.dist + '/css'));
});

我的观察任务是：

gulp.task('watch', function() {
    gulp.watch(config.paths.html, ['html']);
    gulp.watch(config.paths.js, ['js', 'lint']);
    gulp.watch(config.paths.css, ['css']);
});

其余的工作没有问题。这可能是我看不到的小事。

修改

我还尝试将路径更改为：

'./node_modules/bootstrap/dist/css/bootstrap.min.css',
'./node_modules/bootstrap/dist/css/bootstrap-theme.min.css',
'./node_modules/toastr/package/toastr.css',
'./src/css/*.css'

连接任务是：

gulp.task('connect', function(){
    connect.server({
        root : ['dist'],
        port : config.port,
        base : config.devBaseUrl,
        livereload : true
    })
});

Answer 1

在您的配置中，更改 “src / css / main.css”改为“./src/css/main.css”。

而不是按照你的方式编译以下内容，

'node_modules/bootstrap/dist/css/bootstrap.min.css',
'node_modules/bootstrap/dist/css/bootstrap-theme.min.css',
'node_modules/toastr/package/toastr.css',

您可以使用gulp-useref并以此方式执行

// inside your index.html
<head>
    <!-- build:css css/combined.css -->
    <link href="css/one.css" rel="stylesheet">
    <link href="css/two.css" rel="stylesheet">
   <!-- endbuild -->
</head>

Answer 2

我解决了。我只将css任务改为：

gulp.task('css', function() {
    gulp.src(config.paths.css)
        .pipe(concat('bundle.css'))
        .pipe(gulp.dest(config.paths.dist + '/css'));
        .pipe(connect.reload());
});

并且就像魅力一样。

Gulp watch for css不起作用

2 个答案: