css的Gulp手表不起作用

我的gulp手表不适用于css。我有以下配置：css的Gulp手表不起作用

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

我一饮而尽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 
    }) 
});

来源

2016-04-30 Boky

你确定你没有在这些网址中的任何一个错别字，或者其中一个文件不存在？ '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” – kasperoo

当你说它不起作用时，你的意思是，如果你保存这4个文件中的任何一个，watch任务根本不运行css任务？你有什么错误吗？明显的区别在于，你不用'。/'前缀你的css文件，但除了我看不出你的语法有什么问题。你也可以混合使用'''和'''，但这应该不会有太大的区别 – kasperoo

手表任务不起作用，我想，当我刷新页面后，它就起作用了，我也试着在路径中使用./，但是同样的问题，css任务可以正常工作，并且我没有得到任何错误 – Boky

我解决它。我只改变了css的任务：

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

而且工作起来就像一个魅力。

来源

2016-05-05 09:10:29 Boky

在你的配置，改变 “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',

你可以只使用一饮而尽，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>

来源

2016-05-02 16:32:42

谢谢。我已经解决了。我刚刚添加'.pipe（connect.reload（））;'在css任务结束时，它工作。 – Boky

css的Gulp手表不起作用

回答

相关问题