Gulp 监视 css 不起作用

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'
    }
};

我的gulpcss任务是：

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 监视 css 不起作用

Gulp watch for css doesn't work

gulp

gulp-watch