Gulp 使用监视任务连接和缩小

Question

我正在尝试设置一些 Gulp 任务。我想连接一些 JS 文件，将它们缩小以创建 1 个 JS 文件，但我希望每次更改原始 JS 文件时都完成此操作，但我似乎无法让“监视”任务正常运行

这是我的 Gulpfile.js

gulp.task('minify', ['watch', 'scripts'], function(){
  gulp.src('themes/corp-fluid/js/dist/**/*.js')
          .pipe(minify({
            ext:{
              src:'-debug.js',
              min:'.js'
            },
            ignoreFiles: ['-min.js']
          }))
          .pipe(gulp.dest('themes/corp-fluid/js/dist'));
});

gulp.task('scripts', function(){
  return gulp.src(['themes/corp-fluid/js/slick.js', 'themes/corp-fluid/js/functions.js'])
          .pipe(concat('main.js'))
          .pipe(gulp.dest('themes/corp-fluid/js/dist'));
});

gulp.task('watch', function(){
  gulp.watch('themes/corp-fluid/js/**/*.js');
});

Answer 1

有几件事。你需要在你的 'watch' 任务，所以

gulp.task('watch', function(){
  gulp.watch('themes/corp-fluid/js/**/*.js', ['minify']);
});

并将“缩小”任务的第一行简化为

gulp.task('minify', ['scripts'], function(){

您无需在此处再次调用“监视”任务。最后，您将使用

gulp watch

Answer 2

带有 sass、js concat、minify 和 watch 任务的 Gulpfile。 您需要在浏览器同步任务中将代理域名更改为您的域名，并在 concat_js 任务中更改文件数组。

var gulp = require('gulp')
var browserSync = require('browser-sync')
var sass = require('gulp-sass')
var concat = require('gulp-concat');
var minify = require('gulp-minify');

//Sass
gulp.task('sass', function () {   
    return gulp.src('app/sass/**/*.scss')     
            .pipe(sass()) 
            // pipe(gulp.dest('app/css')) 
            .pipe(gulp.dest('app/css/'))
});

//browser reload
gulp.task('browser-sync', function () {
    browserSync({	
        notify: false, 
        proxy: "http://front-end" //Your domain name
    });
});

//concat
gulp.task('concat_js', function() {
  //An array of files is required for the correct order of contact
  return gulp.src(['app/js/_helpers.js',
                   'app/js/_cookie_notice.js']) //file array need for 
    .pipe(concat('all.js'))
    .pipe(minify({
        ext:{
            src:'',
            min:'.min.js'
        },
        noSource: true}))
    .pipe(gulp.dest('app/js/'));
});

//watch
gulp.task('watch', ['browser-sync', 'sass'], function () {
    gulp.watch('app/sass/**/*.scss', ['sass']);    
    gulp.watch('app/js/*.js', ['concat_js']);  
    gulp.watch('app/**/*.*', browserSync.reload);    
});



gulp.task('default', ['watch', 'sass', 'concat_js']);

注意：任务 concat_js 中的文件数组是正确的文件联系顺序所必需的。