소스 마스크가있는 꿀꺽 꿀꺽 소리 필터

Question

비슷한 질문이 있습니다. here 이것은 내 역할에 대한 좀 더 많은 연구와 이것이 작동 할 수있는 새로운 방법으로 병합되었습니다.

기본적으로 나는 내 .js 및 .coffee 개의 파일을 하나의 gulp.src() 개체 내에 포함하고 확장명에 따라 관련 작업을 수행하려고합니다.

gulp-if으로 시작한 무엇이 gulp-filter을 사용하여 나를 솔직히 선호하는 것으로 바뀌 었습니다. 지금 당장 실행중인 catch는 gulp-sourcemaps과 함께 작동하도록 설정하는 것입니다. 현재 작업은 다른 작업을 무시하는 것처럼 보입니다.하지만 궁극적으로 모든 파일을 하나의 파일에 연결하고, 다른 파일에 소스 매핑하고, 각 파일 확장명에 각각의 작업을 실행시키는 것이 좋습니다. uglify 태스크가 주석 처리 된 것을 볼 수 있습니다. 그게 내게 소리 지르는거야. 떨어져 나가는 전체 무리없이. 필터가 작동하고 CoffeeScript 오류가 발생하면 coffeescriptlint()이 작업을 수행하지만 내 감시 명령이 실행됩니다. 아직 달리면서도 아무런 반응이 없습니다.

내가 gulp-extract-sourcemap 같은 것을 사용하여 각 소스 맵을 추출하는 경로를 따라가는 것 같지만, 이것이 올바른 방향인지 확실하지 않습니다.

일반적으로 나는 JS와 Coffeescript 작업을 분리 할 것이지만, 나는 두 가지 사이에 많은 것들이 섞여있어 간단한 필터와 함께 가져 오는 것이 논리적 인 것처럼 보였다. 특히 나는 둘 모두를위한 소스 맵.

나는이 느낌이 아주 가깝기 때문에, 올바른 방향으로의 모든 전환이 크게 감사 할 것입니다. 현재 gulpfile.js와 package.json이 포함되어 있습니다. 감사!

Gulpfile.js

// Load plugins 
var gulp  = require('gulp'), 
    jshint  = require('gulp-jshint'), 
    coffee  = require('gulp-coffee'), 
    changed = require('gulp-changed'), 
    coffeelint = require('gulp-coffeelint'), 
    uglify  = require('gulp-uglify'), 
    sourcemaps = require('gulp-sourcemaps'), 
    notify  = require('gulp-notify'), 
    concat  = require('gulp-concat'), 
    filesize = require('gulp-size'), 
    livereload = require('gulp-livereload'), 
    duration = require('gulp-duration'), 
    gutil  = require('gulp-util'), 
    gFilter  = require('gulp-filter'); 

gulp.task('scripts', function() { 
    var jsBuildDir = 'assets/js/build/', 
     jsFilter = gFilter('**/*.js'), 
     coffeeFilter = gFilter('**/*.coffee'); 

    return gulp.src([ 
     'assets/js/src/_init.coffee', 
     'assets/js/src/_init.js' 
    ]) 
    .pipe(coffeeFilter) 
     .pipe(coffeelint().on('error', gutil.log)) 
     .pipe(coffeelint.reporter()) 
     .pipe(sourcemaps.init()) 
     .pipe(coffee({bare: true}).on('error', gutil.log)) 
     .pipe(sourcemaps.write('../../maps')) 
    .pipe(coffeeFilter.restore()) 
    .pipe(jsFilter) 
     .pipe(jshint({ 
      'boss': true, 
      'sub': true, 
      'evil': true, 
      'browser': true, 
      'globals': { 
       'module': false, 
       'require': true 
      } 
     }), 
     jshint.reporter('jshint-stylish')) 
    .pipe(jsFilter.restore()) 
    .pipe(concat('scripts.min.js')) 
    //.pipe(uglify()) 
    .pipe(filesize({ 
     title: 'Scripts:' 
    })) 
    .pipe(gulp.dest(jsBuildDir)) 
    .pipe(duration('building script files')) 
    .pipe(notify({ message: 'Coffeescript task complete' })); 
}); 

// Default task 
gulp.task('default', ['scripts']); 

// Watch 
gulp.task('watch', function() { 

    gulp.watch(['assets/js/src/**/*.js', 'assets/js/src/**/*.coffee'], ['scripts']); 

    // Create LiveReload server 
    var server = livereload(); 

    // Watch files in patterns below, reload on change 
    gulp.watch(['assets/js/build/*']).on('change', function(file) { 
    server.changed(file.path); 
    }); 

}); 

Package.json

{ 
    "devDependencies": { 
    "gulp": "^3.8.8", 
    "gulp-changed": "^1.0.0", 
    "gulp-coffee": "^2.2.0", 
    "gulp-coffeelint": "^0.4.0", 
    "gulp-concat": "^2.4.0", 
    "gulp-duration": "0.0.0", 
    "gulp-filter": "^1.0.2", 
    "gulp-jshint": "^1.8.4", 
    "gulp-livereload": "^2.1.1", 
    "gulp-notify": "^1.6.0", 
    "gulp-size": "^1.1.0", 
    "gulp-sourcemaps": "^1.2.2", 
    "gulp-uglify": "^1.0.1", 
    "gulp-util": "^3.0.1", 
    "jshint-stylish": "^0.4.0" 
    } 
} 

Answer 1

나는 당신이 당신의 파이프의 잘못된 부분 주위에 sourcemaps.init() 및 sourcemaps.write() 포장 같아요. 나는 그들이 속한다고 가정하는 명령을 쓴다. 아래를 참조하십시오.

gulp-filter도 꽤 많이 사용되었습니다. 그러나, 나는 그것을 지나치게 복잡하게하지 않기 위해 최소한으로 유지했다. 나는 run-sequence 매우 도움이되었다. (또한 내 gulpfiles here 및 here의 일부를 확인하십시오.)

가 내가 이런 식으로 접근하는 것

시나리오 : 나는 아주 쉽게 이런 종류의 일을 할 수있는 NPM 모듈을했습니다

var runSequence = require('run-sequence'); 
// ... 

gulp.task('scripts', function (done) { 
    runSequence('lint', 'build', done); 
}); 

gulp.task('lint', function (done) { 
    runSequence('lint-coffee', 'lint-js', done); 
}); 

gulp.task('lint-coffee', function() { 
    // Just lint your coffee files here... 
}); 

gulp.task('lint-js', function() { 
    // Just lint your js files here... 
}); 

gulp.task('build', function() { 

    return gulp.src([ 
    'assets/js/src/_init.coffee', 
    'assets/js/src/_init.js' 
    ]) 
    .pipe(coffeeFilter) 
    .pipe(coffee({bare: true}).on('error', gutil.log)) 
    .pipe(coffeeFilter.restore()) 
    .pipe(sourcemaps.init()) 
    .pipe(concat('scripts.min.js')) 
    .pipe(uglify()) 
    .pipe(sourcemaps.write('../../maps')) 
    .pipe(gulp.dest(jsBuildDir)); 

});