Gulp 编译更少的文件并缩小它们

Question

我是使用 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'] , () => { gulp.watch('web/assets/less/*.less', ['less']); });

gulp.task('browserSync', () => {
browserSync.init({
    notify: false,
    browser: "chrome",
    proxy: "localhost/web/app_dev.php",
    open: false
});});

browserSync 任务运行良好，但它从未将 .css 编译为 .min.css。但是当我运行“gulp minifyCSS”时，它就完成了这项工作......

我错过了一步吗？谁能帮我解决这个问题？ :)

Answer 1

我几乎可以肯定这会奏效：

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
  });
});