Gulp:同一任务中不同的管道收集(CoffeeScript和JavaScript)
Gulp:同一任务中不同的管道收集(CoffeeScript和JavaScript)
提问于 2014-09-25 13:51:11
我一直试图做的是创建一个scripts任务，该任务接受所有.coffee和.js文件，并为每个文件执行所需的任务：
- 咖啡文件应该通过咖啡()、咖啡()和coffeelint.reporter()来运行。
- JS文件应该通过jshint()运行。
- 然后，所有文件都应该通过concat()、uglify()运行，并最终将目标设置为最终构建文件。
我之所以有一些.coffee和一些.js，是因为我使用的是包含JS文件的Bower组件，尽管我想插入它并使用CoffeeScript创建自定义脚本。
我的第一次访问涉及到吞咽，它允许我在一个gulp.src()声明中包含每个脚本文件--通过管道对扩展名进行appopriate检查(使用gulp)，并在那里执行必要的操作。奇怪的是，这并没有成功；一直没有说有流错误；说gulp uglify()有问题，但我永远无法解释实际问题是什么--用我的gulp文件或者用gulp如果说可能是一个问题，如何构建一个特定的插件。所以，我当时认为有两个不同的流，然后同时运行它们可以工作(看看到目前为止我有什么)，但是我会有两个完全独立的构建--我显然可以在事实之后进行连接，但剩下的是丑陋的临时文件，如果需要按一定的顺序处理，就不能混合在.coffee和.js文件中。
理想情况下，我希望能够将我的src文件混合到我想要的任何扩展名中，根据扩展名调用必要的操作，并传递到其他两个共享项。如有任何意见，我将不胜感激。谢谢!
我到目前为止(上文所述)的情况：
// Load plugins
var gulp = require('gulp'),
jshint = require('gulp-jshint'),
coffee = require('gulp-coffee'),
changed = require('gulp-changed'),
coffeelint = require('gulp-coffeelint'),
gulpif = require('gulp-if'),
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'),
merge = require('merge-stream'),
es = require('event-stream');
gulp.task('test', function() {
var jsBuildDir = 'assets/js/build/';
var coffeescript =
gulp.src([
'assets/js/src/_init.coffee'
])
.pipe(coffee())
.pipe(coffeelint())
.pipe(coffeelint.reporter())
.pipe(concat('coffee.js'))
.pipe(uglify())
.pipe(filesize({
title: 'CoffeeScript:'
}))
.pipe(gulp.dest(jsBuildDir))
.pipe(duration('building coffeescript files'))
.pipe(notify({ message: 'Coffeescript task complete' }));
var js =
gulp.src([
'assets/js/src/_init.js'
])
.pipe(jshint({
'boss': true,
'sub': true,
'evil': true,
'browser': true,
'globals': {
'module': false,
'require': true
}
}),
jshint.reporter('jshint-stylish'))
.pipe(concat('js.js'))
.pipe(uglify())
.pipe(gulp.dest(jsBuildDir))
.pipe(filesize({
title: 'Main Scripts:'
}))
.pipe(duration('building main JS files'))
.pipe(notify({ message: 'Main scripts task complete' }));
es.concat(cofeescript, js);
});
// Default task
gulp.task('default', ['scripts']);
// Watch
gulp.task('watch', function() {
gulp.watch(['assets/js/src/**/*.js', 'assets/js/src/**/*.coffee'], ['hint-n-lint', '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);
});
});回答 1
Stack Overflow用户
回答已采纳
发布于 2014-09-25 14:08:07
我会在两个任务行中这样做：
- 处理咖啡文件(例如:将它们转换为javascript)
- 处理javascript文件，这些文件将等待咖啡任务在启动前继续执行。
我的gulpfile.js应该是：
var coffee_files = ['assets/js/src/*.coffee']
var js_files = ['assets/js/src/*.js']
gulp.task('coffee', function() {
//note the return is very important here
return gulp.src(coffee_files)
.pipe(coffee()) //do your pipes
//dest to the same folder assuming those are now js files
.pipe(gulp.dest('assets/js/src'))
})
gulp.task('javascript', ['coffee'], function() {
return gulp.src(js_files)
.pipe(jshint())
.pipe(minify())
.pipe(gulp.dest('assets/js/build'))
})
/**
* Now, `gulp` command will first process coffee files, transform them to javascript
* then javascript is executed and minifies stuff to your destination folder
*/
gulp.task('default', ['javascript'])
/**
* `gulp coffee` will only process coffee files
* `gulp javascript` will only process javascript files
* Watching files can be done like this:
*/
gulp.task('watch', function() {
gulp.watch(coffee_files, ['javascript'])
gulp.watch(js_files, ['javascript'])
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26040358
复制相关文章
相似问题
腾讯云开发者
