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手錶不起作用

回答

相關問題