Question

我是Gulp或Grunt等任务运行员的新手，我选择使用Gulp自动完成任务，因为我熟悉Javascript语言。

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

我想用BrowSync运行监视任务，它会自动将无文件编译为.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＆＃34;它做的工作......

我是否错过了一步？任何人都可以帮我这个吗？：）

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

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

1 个答案: