Gulp 狼吞虎咽地编译更少的文件并缩小它们

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或Grunt这样的任务运行程序的使用是新手,我选择使用Gulp来自动化我的任务,因为我熟悉Javascript语言

我成功地将.less文件编译为.css,甚至编写了一个任务来缩小.css文件

我想用BrowSync运行watch任务,它会自动将.less文件编译成.css,并将.css编译成.min.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
  });
});