使用SourceMaps的Gulp过滤器 [英] Gulp Filter with SourceMaps
问题描述
我有一个类似的问题，这里
基本上我想让我的所有 > 中的 文件在扩展上，做相关的任务。
起初是 gulp-if 使用 gulp过滤器变成了我，我更诚实地。我现在遇到的问题是让所有的工作与 gulp-sourcemaps 。当前的任务似乎重写了另一个 - 但我最终想要所有的东西连接在一个文件，源映射在另一个，并让每个文件扩展运行其各自的任务。你会看到uglify任务被注释掉了;因为这是什么不断大喊大叫我;没有一整束去。当我得到过滤器工作，我有一个CoffeeScript错误，我注意到 coffeescriptlint（）将做它的工作，但然后我的watch命令;
似乎我可能会使用类似 gulp-extract-sourcemap ，但我不知道这是否正确的方式。
通常我会分离出JS和Coffeescript任务，但是我有很多事情在两者之间混合，使用一个简单的过滤器将它们组合在一起似乎是合理的 - 特别是我试图找出这两者的源映射。
我觉得这个是非常接近的，所以任何微调在正确的方向将非常感谢。包括当前gulpfile.js和package.json如果你想旋转它。非常感谢！
Gulpfile.js
//载入外挂程式
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 '，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 'build script files'））
.pipe（notify（{message：'Coffeescript task complete'}））;
}）;
//默认任务
gulp.task（'default'，['scripts']）;
//观看
gulp.task（'watch'，function（）{
gulp.watch（['assets / js / src / ** / * .js'，'assets / js / src / ** / *。coffee']，['scripts']）;
//创建LiveReload服务器
var server = livereload ）;
//以下面的模式观察文件，重新加载更改
gulp.watch（['assets / js / build / *']）。文件）{
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 ，
jshint-stylish：^ 0.4.0
}
}
<我想你包装了 sourcemaps.init（）和 sourcemaps.write（） ）在管道的错误部分。我把命令放在我认为他们属于的地方。见下文。
我也使用了 gulp-filter 但是，我把它保持在最低程度，不要过于复杂的东西。我发现 run-sequence 非常有帮助。 （也请查看我的一些gulpfiles 这里和此处。）
你的场景我会这样：
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（）{
//只是在这里你的咖啡文件...
}）;
gulp.task（'lint-js'，function（）{
//只是把你的js文件放在这里...
}）;
gulp.task（'build'，function（）{
return gulp.src（[
'assets / js / src / _init.coffee'
'assets / js / src / _init.js'
]）
.pipe（coffeeFilter）
.pipe（coffee（{bare：true}）。on '，gutil.log））
.pipe（coffeeFilter.restore（））
.pipe（sourcemaps.init（））
.pipe（'scripts.min.js' ）
.pipe（uglify（））
.pipe（sourcemaps.write（'../../ maps'））
.pipe（gulp.dest（jsBuildDir））;
}）;
I had a similar question here that has merged into a bit more research on my part and a new way this could work.
Basically I'm trying to have all of my .js and .coffee files within one gulp.src() object and based on the extension, do relevant tasks.
What started off with gulp-if has turned into me using gulp-filter which I prefer honestly. The catch I'm running into right now is getting this all to work with gulp-sourcemaps. The current task seems to override the other -- but I'd ultimately like everything to be concatenated in one file, source-mapped in another and have each file extension run its respective tasks. You'll see the uglify task is commented out; as that's what keeps yelling at me; without a whole bunch to go off of. When I do get the filters to work and I have a CoffeeScript error, I noticed that coffeescriptlint() will do its job, but then my watch command; while still running, doesn't respond to anything.
It seems like I might be going down the path of extracting each sourcemap using something like gulp-extract-sourcemap, but am not sure if that's the right way to go.
Normally I'd separate out the JS and Coffeescript task, but I have so many things co-mingling between the two that bringing them together with a simple filter seemed logical -- especially as I'm trying to figure out the sourcemaps for both.
I feel like this one is pretty close, so any nudges in the right direction would be greatly appreciated. Included current gulpfile.js and package.json if you want to spin it up. Thanks!
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"
}
}
I guess you wrapped the sourcemaps.init() and sourcemaps.write() around the wrong section of your pipe. I put the commands where I assume they belong. See below.
I used gulp-filter quite a few times as well. However, I kept it to a minimum to not overcomplicate things. I found run-sequence very helpful. (Also check out some of my gulpfiles here and here.)
Your scenario I would approach like this:
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));
});
这篇关于使用SourceMaps的Gulp过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
