Gulp 狼吞虎咽地编译更少的文件并缩小它们
我对Gulp或Grunt这样的任务运行程序的使用是新手,我选择使用Gulp来自动化我的任务,因为我熟悉Javascript语言 我成功地将.less文件编译为.css,甚至编写了一个任务来缩小.css文件 我想用BrowSync运行watch任务,它会自动将.less文件编译成.css,并将.css编译成.min.css 这是我的密码:Gulp 狼吞虎咽地编译更少的文件并缩小它们,gulp,Gulp,我对Gulp或Grunt这样的任务运行程序的使用是新手,我选择使用Gulp来自动化我的任务,因为我熟悉Javascript语言 我成功地将.less文件编译为.css,甚至编写了一个任务来缩小.css文件 我想用BrowSync运行watch任务,它会自动将.less文件编译成.css,并将.css编译成.min.css 这是我的密码: gulp.task('minifyCSS', () => { return gulp.src([ 'web/assets/css/*.css',
gulp.task('minifyCSS', () => {
return gulp.src([
'web/assets/css/*.css',
'!web/assets/css/*.min.css'
])
.pipe(sourcemaps.init())
.pipe(cleanCSS())
.pipe(sourcemaps.write())
.pipe(rename({ suffix: '.min'}))
.pipe(gulp.dest('web/assets/css'));});
gulp.task('less', () => {
return gulp.src('web/assets/less/*.less')
.pipe(less())
.pipe(gulp.dest('web/assets/css'))
.pipe(browserSync.reload({
stream: true
}));});
gulp.task('watchSync',['less','minifyCSS','browserSync',,()=>{
狼吞虎咽的看('web/assets/less/*.less',['less']);
});代码>
browserSync任务运行良好,但从未将.css编译为.min.css。但当我运行“gulp minifyCSS”时,它就完成了任务
我会错过一步吗?有人能帮我吗?:) 我几乎可以肯定这会奏效:
gulp.task('minifyCSS', ['less'], () => {
return gulp.src([
'web/assets/css/*.css',
'!web/assets/css/*.min.css'
])
.pipe(sourcemaps.init())
.pipe(cleanCSS())
.pipe(sourcemaps.write())
.pipe(rename({ suffix: '.min'}))
.pipe(gulp.dest('web/assets/css'))
.pipe(browserSync.reload({
stream: true
}))
;
});
gulp.task('less', () => {
return gulp.src('web/assets/less/*.less')
.pipe(less())
.pipe(gulp.dest('web/assets/css'))
;
});
gulp.task('watchSync', ['minifyCSS', 'browserSync'] , () => {
gulp.watch('web/assets/less/*.less', ['minifyCSS']);
});
gulp.task('browserSync', () => {
browserSync.init({
notify: false,
browser: "chrome",
proxy: "localhost/web/app_dev.php",
open: false
});
});
你确定gulp.watch不需要退货吗?我不确定。。。我知道gulp.watch会毫无回报地完成任务,但它不会执行minifyCSS任务:/your gulp.watch应该调用minifyCSS not'less'规则,minifyCSS规则应该要求'less'。我明白你的意思了!我要试试;)它不起作用。我的.css被修改了,但是.min.css没有改变。。。我调用watchSync此任务需要“minifyCss”,minifyCss规则需要“less”,我将尝试找到执行任务的正确方法!我的任务是什么。。。正如你所说的!:)谢谢你抽出时间!
gulp.task('minifyCSS', ['less'], () => {
return gulp.src([
'web/assets/css/*.css',
'!web/assets/css/*.min.css'
])
.pipe(sourcemaps.init())
.pipe(cleanCSS())
.pipe(sourcemaps.write())
.pipe(rename({ suffix: '.min'}))
.pipe(gulp.dest('web/assets/css'))
.pipe(browserSync.reload({
stream: true
}))
;
});
gulp.task('less', () => {
return gulp.src('web/assets/less/*.less')
.pipe(less())
.pipe(gulp.dest('web/assets/css'))
;
});
gulp.task('watchSync', ['minifyCSS', 'browserSync'] , () => {
gulp.watch('web/assets/less/*.less', ['minifyCSS']);
});
gulp.task('browserSync', () => {
browserSync.init({
notify: false,
browser: "chrome",
proxy: "localhost/web/app_dev.php",
open: false
});
});