咕噜咕噜咕噜咕噜咕唧咕唧咕

我必须做两个步骤：

1. 使.css文件forms更less
2. 缩小生成的CSS文件

这是我的大文件：

var gulp = require('gulp'), watch = require("gulp-watch"), less = require('gulp-less'), cssmin = require('gulp-cssmin'), rename = require('gulp-rename'); gulp.task('watch-less', function () { watch({glob: './*.less'}, function (files) { // watch any changes on coffee files gulp.start('compile-less'); // run the compile task }); watch({ glob: ['./*.css', '!./*.min.css'] }, function(files) { gulp.start('minify-css'); // run the compile task }); }); gulp.task('compile-less', function () { gulp.src('./*.less') // path to your file .pipe(less().on('error', function(err) { console.log(err); })) .pipe(gulp.dest('./')); }); gulp.task('minify-css', function() { gulp.src([ './*.css', '!./*.min.css' ]) .pipe(cssmin().on('error', function(err) { console.log(err); })) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('./')); }) gulp.task('default', ['watch-less']); 

当我开始时，只有第一步完成。 请帮帮我。

Answer 1

你应该记住，你可以简单地将操作链接在一个glob模式上。

不知道为什么你需要gulp.watch时候可以使用内置的监视器，这个插件在棘手的情况下是有用的，这似乎并不是这种情况，但你可以坚持下去，如果你真的想。

不要忘记return你的stream，所以gulp知道什么时候完成任务。

我通常也把所有的watchers包裹在一个watch task ，而不需要把他们分开。

对我来说，你的Gulpfile应该是这样的：

 var gulp = require('gulp'), less = require('gulp-less'), cssmin = require('gulp-cssmin'), rename = require('gulp-rename'); gulp.task('watch', function () { gulp.watch('./*.less', ['less']); }); gulp.task('less', function () { return gulp.src('./*.less') .pipe(less().on('error', function (err) { console.log(err); })) .pipe(cssmin().on('error', function(err) { console.log(err); })) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('./')); }); gulp.task('default', ['less', 'watch']); 

Answer 2

经过一段时间没有需要，我方便的解决办法是：

 var gulp = require('gulp'), less = require('gulp-less'), cssmin = require('gulp-cssmin'), plumber = require('gulp-plumber'), rename = require('gulp-rename'); gulp.task('watch', function () { gulp.watch('./styles/*.less', ['less']); }); gulp.task('less', function () { gulp.src('./styles/*.less') .pipe(plumber()) .pipe(less()) .pipe(gulp.dest('./styles/')) .pipe(cssmin()) .pipe(rename({ suffix: '.min' })) .pipe(gulp.dest('./styles')) }); gulp.task('default', ['less', 'watch']); 

Answer 3

最好的两个世界可能是将gulp.watch添加到默认的gulp.task，并且如果您需要浏览器同步，当您对正在监视的文件夹进行任何更改时，它将重新加载，如下所示：

 var gulp = require('gulp'), less = require('gulp-less'), cssmin = require('gulp-cssmin'), rename = require('gulp-rename'), browser = require('browser-sync'); gulp.task('less', function() { return gulp.src('./*.less') .pipe(less().on('error', function(err) { console.log(err); })) .pipe(cssmin().on('error', function(err) { console.log(err); })) .pipe(rename({ suffix: '.min' })) .pipe(gulp.dest('./')); }); gulp.task('server', function() { browser({ server: { baseDir: './' } }); }); gulp.task('default', ['less', 'server'], function() { gulp.watch('./*.less', ['less', browser.reload]); }); 

Answer 4

这是我用sass做的。 种类相同与较less。

与以前的答案不同的是，我想再走一步：

1. 得到风骚
2. 将其转换成一个CSS并创build该文件
3. 获取该文件并将其缩小。

所以结构会是这样的：

 test.scss test.css test.min.css 

 var gulp = require("gulp"), sass = require("gulp-sass"), rename = require("gulp-rename"); var paths = { webroot: "./wwwroot/" }; paths.scss = paths.webroot + "css/**/*.scss"; gulp.task('sass', function() { gulp.src(paths.scss) .pipe(sass()) .pipe(gulp.dest(paths.webroot + "css")) .pipe(cssmin()) .pipe(rename({ suffix: '.min' })) .pipe(gulp.dest(paths.webroot + "css")); }); 

如果有人想要和我一样的东西，就增加一个新的答案。