I have recently started using gulp and I am familiar with codekit where I used to write
// @codekit-prepend "foo.js"
// @codekit-prepend "bar.js"
to concatenate js files.
Can someone guide me on how to achieve the same result with gulp?
Below is the gulpfile I have been working on:
//*********** IMPORTS *****************
var gulp = require('gulp');
var less = require('gulp-less');
var gutil = require('gulp-util');
var rename = require("gulp-rename");
var map = require("map-stream");
var livereload = require("gulp-livereload");
var concat = require("gulp-concat");
var uglify = require('gulp-uglify');
var watch = require("gulp-watch");
var minifyHTML = require('gulp-minify-html');
global.errorMessage = '';
//Configuration - Change me
var lessFiles = [
{
watch: 'source/less/*.less',
less: 'source/less/master.less',
output: 'build/css/',
name: 'all.css',
}
];
var jsFiles = [
{
watch: 'spurce/js/*.js',
output: 'build/js/',
name: 'all.js',
nameMin: 'all.min.js',
}
];
var htmlFiles = [
{
watch: 'source/*.html',
output: 'build/',
}
];
//END configuration
gulp.task('watch', function () {
for (var i in lessFiles) {
lessWatch(lessFiles[i]);
}
for (var j in jsFiles) {
scriptWatch(jsFiles[j]);
}
for (var k in htmlFiles) {
htmlWatch(htmlFiles[k]);
}
});
function htmlWatch (htmlData) {
var opts = {comments:false,spare:true};
gulp.src(htmlData.watch)
.pipe(watch(htmlData.watch, function() {
gulp.src(htmlData.watch)
.pipe(minifyHTML(opts))
.pipe(gulp.dest(htmlData.output))
.pipe(livereload());
}));
}
function lessWatch(lessData) {
gulp.src(lessData.watch)
.pipe(watch(lessData.watch, function() {
gulp.src(lessData.less)
.pipe(less(lessOptions))
.on('error', function(err) {
gutil.log(err.message);
gutil.beep();
global.errorMessage = err.message + " ";
})
.pipe(checkErrors())
.pipe(rename(lessData.name))
.pipe(gulp.dest(lessData.output))
.pipe(livereload());
}));
}
function scriptWatch(jsData) {
gulp.src(jsData.watch)
.pipe(watch(jsData.watch, function() {
gulp.src(jsData.watch)
.pipe(concat(jsData.name))
.pipe(gulp.dest(jsData.output))
.pipe(uglify({outSourceMap: false}))
.pipe(rename(jsData.nameMin))
.pipe(gulp.dest(jsData.output));
}));
}
gulp.task('default', ['watch']);
/// Defaults yo
var lessOptions = {
'style': 'compressed'
};
// Does pretty printing of less errors
var checkErrors = function (obj) {
function checkErrors(file, callback, errorMessage) {
if (file.path.indexOf('.less') != -1) {
file.contents = new Buffer("\
body * { white-space:pre; }\
body * { display: none!important; }\
body:before {\
white-space:pre;\
content: '"+ global.errorMessage.replace(/(\\)/gm,"/").replace(/(\r\n|\n|\r)/gm,"\\A") +"';\
}\
html{background:#ccf!important; }\
");
}
callback(null, file);
}
return map(checkErrors);
};