I've been working on creating a single scripts task that can handle both .coffee and .js files effectively:
- Coffee files need to go through coffee(), coffeelint() and coffeelint.reporter()
- JS files should run through jshint()
- All files then need to pass through concat(), uglify() before being saved as the final build file.
The reason I have a mix of .coffee and .js files is because I'm using Bower components with JS files, but I prefer to write my custom scripts in CoffeeScript.
In my initial attempt, I used gulp-if to filter script files for processing based on their extension. However, I encountered issues with gulp-uglify() throwing stream errors, which I couldn't troubleshoot. Then, I tried running separate streams concurrently, but it resulted in two distinct builds, making it difficult to merge them seamlessly while maintaining order.
My goal is to be able to mix different source file extensions, execute specific tasks based on the extension, and then continue with shared actions. Any insights or suggestions would be greatly appreciated. Thank you!
This is what I've implemented so far (as described above):
// 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);
});
});