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

我必须做两个步骤:

  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']); 

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

       

网上收集的解决方案 "咕噜咕噜咕噜咕噜咕唧咕唧咕"

你应该记住,你可以简单地将操作链接在一个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']); 

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

 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']); 

最好的两个世界可能是将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]); }); 

这是我用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")); }); 

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