From 3b09e5a8b408966b2873f69568ce9bf91d68005d Mon Sep 17 00:00:00 2001 From: Austin Pray Date: Wed, 3 Jun 2015 23:00:48 -0500 Subject: [PATCH] Ensures gulp concatonates sources in order closes https://github.com/roots/sage/issues/1476 Make the bower file paths relative due to https://github.com/sirlantis/gulp-order/issues/11 change path.source and path.dist to paths.source and paths.dist to avoid conflicts with usage of the path module. --- CHANGELOG.md | 1 + gulpfile.js | 68 +++++++++++++++++++++++++++++++--------------------- package.json | 1 + 3 files changed, 43 insertions(+), 27 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 55baa5728d..94257c1f6b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ ### HEAD * Add search templates ([#1459](https://github.com/roots/sage/issues/1459)) * Allow `debugger` statements in development JavaScript ([#1487](https://github.com/roots/sage/issues/1487)) +* Ensures gulp sources are in correct order in output ([#1476](https://github.com/roots/sage/issues/1476)) ### 8.2.1: May 7th, 2015 * Update BrowserSync ([#1457](https://github.com/roots/sage/issues/1457)) diff --git a/gulpfile.js b/gulpfile.js index 7130dede48..16a4b257da 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -13,6 +13,8 @@ var lazypipe = require('lazypipe'); var less = require('gulp-less'); var merge = require('merge-stream'); var minifyCss = require('gulp-minify-css'); +var order = require('gulp-order'); +var path = require('path'); var plumber = require('gulp-plumber'); var rev = require('gulp-rev'); var runSequence = require('run-sequence'); @@ -23,10 +25,10 @@ var uglify = require('gulp-uglify'); // See https://github.com/austinpray/asset-builder var manifest = require('asset-builder')('./assets/manifest.json'); -// `path` - Paths to base asset directories. With trailing slashes. -// - `path.source` - Path to the source files. Default: `assets/` -// - `path.dist` - Path to the build directory. Default: `dist/` -var path = manifest.paths; +// `paths` - Paths to base asset directories. With trailing slashes. +// - `paths.source` - Path to the source files. Default: `assets/` +// - `paths.dist` - Path to the build directory. Default: `dist/` +var paths = manifest.paths; // `config` - Store arbitrary configuration values here. var config = manifest.config || {}; @@ -65,7 +67,15 @@ var enabled = { }; // Path to the compiled assets manifest in the dist directory -var revManifest = path.dist + 'assets.json'; +var revManifest = paths.dist + 'assets.json'; + +// Transform absolute paths into project relative paths. +// This is needed due to https://github.com/sirlantis/gulp-order/issues/11 +var makeRelative = function(globs) { + return globs.map(function(glob) { + return path.relative(__dirname, glob); + }); +}; // ## Reusable Pipelines // See https://github.com/OverZealous/lazypipe @@ -74,10 +84,11 @@ var revManifest = path.dist + 'assets.json'; // Example // ``` // gulp.src(cssFiles) -// .pipe(cssTasks('main.css') -// .pipe(gulp.dest(path.dist + 'styles')) +// .pipe(cssTasks('main.css', cssFiles) +// .pipe(order(cssFiles)) +// .pipe(gulp.dest(paths.dist + 'styles')) // ``` -var cssTasks = function(filename) { +var cssTasks = function(filename, globs) { return lazypipe() .pipe(function() { return gulpif(!enabled.failStyleTask, plumber()); @@ -96,6 +107,7 @@ var cssTasks = function(filename) { errLogToConsole: !enabled.failStyleTask })); }) + .pipe(order, makeRelative(globs)) .pipe(concat, filename) .pipe(autoprefixer, { browsers: [ @@ -125,14 +137,16 @@ var cssTasks = function(filename) { // Example // ``` // gulp.src(jsFiles) -// .pipe(jsTasks('main.js') -// .pipe(gulp.dest(path.dist + 'scripts')) +// .pipe(jsTasks('main.js', jsFiles) +// .pipe(order(jsFiles)) +// .pipe(gulp.dest(paths.dist + 'scripts')) // ``` -var jsTasks = function(filename) { +var jsTasks = function(filename, globs) { return lazypipe() .pipe(function() { return gulpif(enabled.maps, sourcemaps.init()); }) + .pipe(order, makeRelative(globs)) .pipe(concat, filename) .pipe(uglify, { compress: { @@ -154,13 +168,13 @@ var jsTasks = function(filename) { // See https://github.com/sindresorhus/gulp-rev var writeToManifest = function(directory) { return lazypipe() - .pipe(gulp.dest, path.dist + directory) + .pipe(gulp.dest, paths.dist + directory) .pipe(browserSync.stream, {match: '**/*.{js,css}'}) .pipe(rev.manifest, revManifest, { - base: path.dist, + base: paths.dist, merge: true }) - .pipe(gulp.dest, path.dist)(); + .pipe(gulp.dest, paths.dist)(); }; // ## Gulp tasks @@ -173,14 +187,14 @@ var writeToManifest = function(directory) { gulp.task('styles', ['wiredep'], function() { var merged = merge(); manifest.forEachDependency('css', function(dep) { - var cssTasksInstance = cssTasks(dep.name); + var cssTasksInstance = cssTasks(dep.name, dep.globs); if (!enabled.failStyleTask) { cssTasksInstance.on('error', function(err) { console.error(err.message); this.emit('end'); }); } - merged.add(gulp.src(dep.globs, {base: 'styles'}) + merged.add(gulp.src(dep.globs, {base: './'}) .pipe(cssTasksInstance)); }); return merged @@ -194,8 +208,8 @@ gulp.task('scripts', ['jshint'], function() { var merged = merge(); manifest.forEachDependency('js', function(dep) { merged.add( - gulp.src(dep.globs, {base: 'scripts'}) - .pipe(jsTasks(dep.name)) + gulp.src(dep.globs, {base: './'}) + .pipe(jsTasks(dep.name, dep.globs)) ); }); return merged @@ -208,7 +222,7 @@ gulp.task('scripts', ['jshint'], function() { gulp.task('fonts', function() { return gulp.src(globs.fonts) .pipe(flatten()) - .pipe(gulp.dest(path.dist + 'fonts')) + .pipe(gulp.dest(paths.dist + 'fonts')) .pipe(browserSync.stream()); }); @@ -221,7 +235,7 @@ gulp.task('images', function() { interlaced: true, svgoPlugins: [{removeUnknownsAndDefaults: false}, {cleanupIDs: false}] })) - .pipe(gulp.dest(path.dist + 'images')) + .pipe(gulp.dest(paths.dist + 'images')) .pipe(browserSync.stream()); }); @@ -238,7 +252,7 @@ gulp.task('jshint', function() { // ### Clean // `gulp clean` - Deletes the build folder entirely. -gulp.task('clean', require('del').bind(null, [path.dist])); +gulp.task('clean', require('del').bind(null, [paths.dist])); // ### Watch // `gulp watch` - Use BrowserSync to proxy your dev server and synchronize code @@ -255,10 +269,10 @@ gulp.task('watch', function() { blacklist: ['/wp-admin/**'] } }); - gulp.watch([path.source + 'styles/**/*'], ['styles']); - gulp.watch([path.source + 'scripts/**/*'], ['jshint', 'scripts']); - gulp.watch([path.source + 'fonts/**/*'], ['fonts']); - gulp.watch([path.source + 'images/**/*'], ['images']); + gulp.watch([paths.source + 'styles/**/*'], ['styles']); + gulp.watch([paths.source + 'scripts/**/*'], ['jshint', 'scripts']); + gulp.watch([paths.source + 'fonts/**/*'], ['fonts']); + gulp.watch([paths.source + 'images/**/*'], ['images']); gulp.watch(['bower.json', 'assets/manifest.json'], ['build']); }); @@ -279,10 +293,10 @@ gulp.task('wiredep', function() { var wiredep = require('wiredep').stream; return gulp.src(project.css) .pipe(wiredep()) - .pipe(changed(path.source + 'styles', { + .pipe(changed(paths.source + 'styles', { hasChanged: changed.compareSha1Digest })) - .pipe(gulp.dest(path.source + 'styles')); + .pipe(gulp.dest(paths.source + 'styles')); }); // ### Gulp diff --git a/package.json b/package.json index 9a3d02403d..925bdb56ab 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "gulp-jshint": "^1.9.4", "gulp-less": "^3.0.2", "gulp-minify-css": "^1.0.0", + "gulp-order": "^1.1.1", "gulp-plumber": "^1.0.0", "gulp-rename": "^1.2.0", "gulp-rev": "^3.0.1",