Browserify chỉ khi lint đi trong Gulp

Question

Tôi đang cố gắng để đạt được dòng Gulp này:

Nó có vẻ như một quá trình khá thẳng về phía trước, nhưng từ những gì tôi có thể nói, nó là không thể để triển khai dưới dạng luồng Gulp.

tôi đang làm điều này:

gulp.task('js', function() { 
    return browserify('foo/main.js') 
     .bundle() 
     .pipe(source('bundle.js')) 
     .pipe(streamify(jshint())) 
     .pipe(jshint.reporter('default')) 
     // source map, minify, … 
}); 

Vấn đề là JSHint nên chạy đầu tiên, chỉ có trên các tập tin đã thay đổi, và quá trình này nên được hủy bỏ nếu lint thất bại. Trong thiết lập của tôi, Browserify luôn chạy, và chỉ sau đó JSHint chạy trên toàn bộ gói. Tôi có thể đối phó với hình phạt về hiệu suất, nhưng số dòng của JSHint tương ứng với gói được tạo ra chứ không phải các tệp nguồn JS của tôi, đó là một nỗi đau.

Answer 1

Đây là một ý tưởng hay. Tôi đã thực hiện điều này vào đường ống của tôi bằng cách sử dụng watchify, sẽ lint tệp bằng cách sử dụng trình báo cáo mặc định và sử dụng trình báo cáo không thành công nếu tệp đã thay đổi không vượt qua bài kiểm tra lint. Mặc dù điều này được đề nghị trong câu hỏi, cá nhân tôi sẽ tránh làm điều này như những gì bạn thực sự muốn chỉ dành cho phóng viên của bạn để phát ra kiểm tra lint, trong khi giữ cho người xem phát triển vẫn sinh ra trong nền. Nếu không, bạn phải tiếp tục khởi động lại tác vụ, thường sẽ có xu hướng gây lỗi cho tôi. Dù sao, đây là các mã:

'use strict'; 

var assign  = require('object-assign'), 
    gulp   = require('gulp'), 
    gutil  = require('gulp-util'), 
    merge  = require('merge-stream'), 
    jshint  = require('gulp-jshint'), 
    source  = require('vinyl-source-stream'), 
    watchify  = require('watchify'), 
    browserify = require('browserify'); 

var resources = { 
    mainJS : 'main.js', 
    bundleJS : 'bundle.js', 
    root  : 'www' 
}; 

function res(r) { 
    return './' + resources[r]; 
} 

gulp.task('watch', function() { 
    var bundler = watchify(browserify(res('mainJS'), assign(watchify.args, { 
     fullPaths: false 
    }))); 

    var scripts = function(changedFiles) { 
     var compileStream = bundler 
      .bundle() 
      .on('error', gutil.log.bind(gutil, gutil.colors.red('Browserify Error\n'))) 
      .pipe(source(res('bundleJS'))) 
      .pipe(gulp.dest(res('root'))); 

     if (changedFiles) { 
      var lintStream = gulp.src(changedFiles) 
       .pipe(jshint()) 
       .pipe(jshint.reporter('default')) 
       .pipe(jshint.reporter('fail')); 

      return merge(lintStream, compileStream); 
     } 

     return compileStream; 
    }; 

    bundler.on('update', scripts); 

    return scripts(); 
}); 

Lưu ý rằng điều này được dựa nặng nề ra khỏi công thức chính thức cho browserify nhanh xây dựng với watchify (https://github.com/gulpjs/gulp/blob/master/docs/recipes/fast-browserify-builds-with-watchify.md), và là một 'tất cả-trong-một' loại nhiệm vụ; đó là để nói rằng tôi thường sẽ đẻ trứng một nhiệm vụ duy nhất ở một nơi nào đó trong nền, với tối thiểu đăng nhập (tôi chạy gulp với cờ --silent), mà là cá nhân dễ dàng hơn để đối phó với :-)