Gulp用手表任务结束并缩小

Posted 2021-04-20

我正在尝试设置一些Gulp任务。我想连接一些JS文件，将它们缩小为创建1个JS文件，但是我希望每次在原始JS文件中进行更改时都这样做，但我似乎无法让'watch'任务正常运行

这是我的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');
});

答案

有几件事。你需要在“监视”任务中调用一些东西，所以

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

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

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

你不需要在那里再次调用'watch'任务。最后，你将运行整个事情

gulp watch

另一答案

Gulpfile与sass，js concat，minify和watch任务。您需要在浏览器同步任务中将代理域名更改为您的域名，并更改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']);

以上是关于Gulp用手表任务结束并缩小的主要内容，如果未能解决你的问题，请参考以下文章

在 vs 代码中打开项目时未检测到 Gulp 任务

Gulp循环监视任务

Gulp 手表因 Spawn EACCES 错误而失败

javascript [minify - php]使用gulp #minify缩小php代码

使用 gulp 生成源映射

关于gulp中顺序执行任务