我必须在 gulp 中执行 2 个步骤:
- 减少 .css 文件格式
- 缩小生成的 css 文件
这是我的 gulpfile:
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']);
当我启动它时,只完成了第一步。 请帮帮我。
最佳答案
您应该记住,使用 gulp
您可以简单地将操作链接到 glob
模式。
当你可以使用内置观察器时,我不确定为什么需要 gulp.watch
,这个插件在棘手的情况下很有用,这里似乎不是这种情况,但是如果你真的愿意,你可以坚持下去。
不要忘记return
您的流,以便gulp
知道任务何时完成。
我通常也将我所有的 watchers
包装在一个 watch 任务
中,不需要将它们分开。
对我来说,你的 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']);
关于javascript - Gulp less 然后缩小任务,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25160597/