我之前在这里有一个类似的问题,后来我进行了更多的研究,并找到了一种新的方法。
基本上,我想要将所有的.js
和.coffee
文件放在一个gulp.src()
对象中,并根据扩展名执行相关任务。
最初使用的是gulp-if,但后来我更喜欢使用gulp-filter。目前遇到的问题是如何让它与gulp-sourcemaps一起工作。当前任务好像会覆盖其他任务——但我最终希望所有内容都被合并到一个文件中,在另一个文件中进行源映射,并且每个文件扩展名都运行其各自的任务。你会看到uglify任务被注释掉了;因为它一直在抱怨,但没有什么线索。当我让过滤器正常工作时,如果CoffeeScript出现错误,我注意到coffeescriptlint()
会执行其工作,但我的监视命令仍在运行,但不会响应任何内容。
看起来我可能要使用gulp-extract-sourcemap之类的东西来提取每个源映射,但我不确定这是否是正确的方法。
通常我会将JS和CoffeeScript任务分开,但由于两者之间有太多的交错,所以使用一个简单的过滤器将它们组合在一起似乎是合理的——特别是当我试图为两者找到sourcemaps时。
我觉得我离成功很近了,所以任何指导都将不胜感激。如果您想启动它,可以包含当前的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"
}
}