2014-12-27 4 views
7

나는이 꿀꺽 스트림 달성하기 위해 노력하고있어에서 통과하면 :Browserify 만 보풀이 꿀꺽

enter image description here

그것은 매우 솔직 과정처럼 보인다,하지만 내가 말할 수있는 것과, 그것은 불가능합니다 Gulp 스트림으로 구현할 수 있습니다.

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

문제는 JSHint는 변경된 파일을 먼저 실행해야한다는 것입니다, 그리고 보풀이 실패 할 경우 프로세스가 중단되어야한다

나는 현재이 일을하고 있습니다. 설치 프로그램에서는 Browserify가 항상 실행되고 JSHint 만 전체 번들에서 실행됩니다. 성능 패널티를 다룰 수는 있지만 JSHint의 라인 번호는 생성 된 번들에 해당하며 내 JS 소스 파일에는 해당하지 않습니다. 이는 통증입니다.

답변

7

이것은 멋진 아이디어입니다. 필자는 기본 리포터를 사용하여 파일을 보풀 (lint) 할 watchify를 사용하여 파이프 라인에이를 구현했으며 변경된 파일이 보풀 테스트를 통과하지 못한 경우 실패 리포터를 사용합니다. 이 질문에서 권장하는 경우에도 개인적으로 당신이 정말로 원하는 것은 리포터가 리터 수표를내는 것입니다. 개발 관찰자는 여전히 백그라운드에서 유지됩니다. 그렇지 않으면 당신은 일반적으로 나를 괴롭 히는 경향이있는 작업을 계속 다시 시작해야합니다. 어쨌든, 여기에 코드입니다 :

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

참고이가 빠른 browserify의 공식 조리법 떨어져 크게 기반 그게 watchify (https://github.com/gulpjs/gulp/blob/master/docs/recipes/fast-browserify-builds-with-watchify.md)로 구축, 그리고 '올인원'타입의 작업입니다; 그게 내가 일반적으로의 :-)

+0

아주 멋진 사용 다루는 개인적으로 쉽게 최소한의 로깅 (필자는 --silent 플래그 꿀꺽를 실행)로, 어딘가에 백그라운드에서 떨어져 하나의 작업을 산란 것이라고 말을하는 것입니다 [merge-stream] (https://www.npmjs.com/package/merge-stream) – plong0

관련 문제