gulp-rev generating new file name for same code base - javascript

Working on a codebase that has used the yeoman angular generator (1.4.x).
gulp-rev is getting used and it's generating a new file (hash) name every single time even for the same code base, how can I keep the same file hash?
Here's the main task that's building it (I suppose),
gulp.task('html', ['inject', 'partials'], function () {
var partialsInjectFile = gulp.src(path.join(conf.paths.tmp, '/partials/templateCacheHtml.js'), { read: false });
var partialsInjectOptions = {
starttag: '<!-- inject:partials -->',
ignorePath: path.join(conf.paths.tmp, '/partials'),
addRootSlash: false
};
var htmlFilter = $.filter('*.html', { restore: true });
var jsFilter = $.filter('**/*.js', { restore: true });
var cssFilter = $.filter('**/*.css', { restore: true });
return gulp.src(path.join(conf.paths.tmp, '/serve/*.html'))
.pipe($.inject(partialsInjectFile, partialsInjectOptions))
.pipe($.useref())
.pipe(jsFilter)
.pipe($.sourcemaps.init())
.pipe($.ngAnnotate())
.pipe($.uglify({ preserveComments: $.uglifySaveLicense })).on('error', conf.errorHandler('Uglify'))
.pipe($.rev())
.pipe($.sourcemaps.write('maps'))
.pipe(jsFilter.restore)
.pipe(cssFilter)
// .pipe($.sourcemaps.init())
.pipe($.replace('../../bower_components/bootstrap-sass/assets/fonts/bootstrap/', '../fonts/'))
.pipe($.cssnano())
.pipe($.rev())
// .pipe($.sourcemaps.write('maps'))
.pipe(cssFilter.restore)
.pipe($.revReplace())
.pipe(htmlFilter)
.pipe($.htmlmin({
removeEmptyAttributes: true,
removeAttributeQuotes: true,
collapseBooleanAttributes: true,
collapseWhitespace: true
}))
.pipe(htmlFilter.restore)
.pipe(gulp.dest(path.join(conf.paths.dist, '/')))
.pipe($.size({ title: path.join(conf.paths.dist, '/'), showFiles: true }));
});
STYLES TASK
'use strict';
var path = require('path');
var gulp = require('gulp');
var conf = require('./conf');
var browserSync = require('browser-sync');
var $ = require('gulp-load-plugins')();
var wiredep = require('wiredep').stream;
var _ = require('lodash');
gulp.task('styles-reload', ['styles'], function() {
return buildStyles()
.pipe(browserSync.stream());
});
gulp.task('styles', function() {
return buildStyles();
});
var buildStyles = function() {
var sassOptions = {
outputStyle: 'expanded',
precision: 10
};
var injectFiles = gulp.src([
path.join(conf.paths.src, '/app/**/*.scss'),
path.join('!' + conf.paths.src, '/app/app.scss')
], { read: false });
var injectOptions = {
transform: function(filePath) {
filePath = filePath.replace(conf.paths.src + '/app/', '');
return '#import "' + filePath + '";';
},
starttag: '// injector',
endtag: '// endinjector',
addRootSlash: false
};
return gulp.src([
path.join(conf.paths.src, '/app/app.scss')
])
.pipe($.inject(injectFiles, injectOptions))
.pipe(wiredep(_.extend({}, conf.wiredep)))
.pipe($.sourcemaps.init())
.pipe($.sass(sassOptions)).on('error', conf.errorHandler('Sass'))
.pipe($.autoprefixer()).on('error', conf.errorHandler('Autoprefixer'))
.pipe($.sourcemaps.write())
.pipe(gulp.dest(path.join(conf.paths.tmp, '/serve/app/')));
};
SCRIPTS TASK
'use strict';
var path = require('path');
var gulp = require('gulp');
var conf = require('./conf');
var browserSync = require('browser-sync');
var $ = require('gulp-load-plugins')();
gulp.task('scripts-reload', function() {
return buildScripts()
.pipe(browserSync.stream());
});
gulp.task('scripts', function() {
return buildScripts();
});
function buildScripts() {
return gulp.src(path.join(conf.paths.src, '/app/**/*.js'))
.pipe($.eslint())
.pipe($.eslint.format())
.pipe($.size())
};
Found this piece on the gulp-rev github page but,
I'm not good at gulp, so don't know what to change and where in the task here.

The stated purpose of gulp-rev is to do this:
Static asset revisioning by appending content hash to filenames unicorn.css → unicorn-d41d8cd98f.css
The idea is to be able to cache these static files, but still deliver the latest code to the user. If you didn't want to revision your assets, you can simply take it out from your pipeline:
return gulp.src(path.join(conf.paths.tmp, '/serve/*.html'))
.pipe($.inject(partialsInjectFile, partialsInjectOptions))
.pipe($.useref())
.pipe(jsFilter)
.pipe($.sourcemaps.init())
.pipe($.ngAnnotate())
.pipe($.uglify({ preserveComments: $.uglifySaveLicense })).on('error', conf.errorHandler('Uglify'))
.pipe($.sourcemaps.write('maps'))
.pipe(jsFilter.restore)
.pipe(cssFilter)
// .pipe($.sourcemaps.init())
.pipe($.replace('../../bower_components/bootstrap-sass/assets/fonts/bootstrap/', '../fonts/'))
.pipe($.cssnano())
// .pipe($.sourcemaps.write('maps'))
.pipe(cssFilter.restore)
.pipe(htmlFilter)
.pipe($.htmlmin({
removeEmptyAttributes: true,
removeAttributeQuotes: true,
collapseBooleanAttributes: true,
collapseWhitespace: true
}))
.pipe(htmlFilter.restore)
.pipe(gulp.dest(path.join(conf.paths.dist, '/')))
.pipe($.size({ title: path.join(conf.paths.dist, '/'), showFiles: true
}));

Related

gulp-usemin multiple html files

I made multiple html files in my repository für different views of my site:
index.html
news.html
page.html
But my gulp build task only build one of the files not all.
gulp.task('build:usemin', ['build:cleanfolder', 'build:cleanfiles'], function() {
var stream = gulp.src('./src/**/*.html')
.pipe(useMin({
css: [minifyCss(), 'concat'],
js: [minifyJs(), 'concat'],
html: [minifyHtml({collapseWhitespace: true})]
}))
.pipe(gulp.dest(distPath));
return stream;
});
Has anybody an idea how I can fix it?
Thanks.
My full gulpfile.js
////////////////////
// Modules
////////////////////
var gulp = require('gulp'),
sass = require('gulp-sass'),
sassLint = require('gulp-sass-lint'),
jsHint = require('gulp-jshint'),
minifyJs = require('gulp-uglify'),
minifyCss = require('gulp-minify-css'),
minifyHtml = require('gulp-htmlmin'),
minifyImages = require('gulp-imagemin'),
useMin = require('gulp-usemin'),
del = require('del'),
browserSync = require('browser-sync').create();
////////////////////
// Constants
////////////////////
const distPath = './dist';
////////////////////
// Tasks
////////////////////
// Sass
gulp.task('sass', function() {
gulp.src('./src/sass/**/*.scss')
.pipe(sassLint({
options: {
formatter: 'stylish',
configFile: './.sass-lint.yml'
},
}))
.pipe(sassLint.format())
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(gulp.dest('./src/css'))
});
// Check JavaScripts
gulp.task('scripts-check', function() {
gulp.src('src/js/**/*.js')
.pipe(jsHint())
.pipe(jsHint.reporter('jshint-stylish'))
});
// Browsersync
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: './src/'
},
notify: false
});
});
// Watch
gulp.task('watch', function() {
gulp.watch('./src/js/**/*.js', ['scripts-check']);
gulp.watch('./src/sass/**/*.scss', ['sass']);
gulp.watch(['./src/*.html', './src/css/*.css', './src/js/*.js']).on('change', browserSync.reload);
});
// Serve
gulp.task('serve', ['sass', 'scripts-check', 'browser-sync', 'watch']);
////////////////////
// Build Tasks
////////////////////
gulp.task('build:cleanfolder', function() {
return del(distPath).then(paths => {
console.log('Deleted files and folders:\n', paths.join('\n'));
});
});
gulp.task('build:copyfiles', ['build:cleanfolder'], function() {
var stream = gulp.src([
'src/**',
])
.pipe(gulp.dest(distPath));
return stream;
});
gulp.task('build:cleanfiles', ['build:copyfiles'], function() {
return del([
distPath + '/**/*.html',
distPath + '/sass',
distPath + '/css',
distPath + '/js',
distPath + '/images',
distPath + '/bower_components'
])
.then(paths => {
console.log('Deleted files and folders:\n', paths.join('\n'));
});
});
gulp.task('build:usemin', ['build:cleanfolder', 'build:cleanfiles'], function() {
var stream = gulp.src('./src/**/*.html')
.pipe(useMin({
css: [minifyCss(), 'concat'],
js: [minifyJs(), 'concat'],
html: [ function(){ return minifyHtml({collapseWhitespace: true});} ]
}))
.pipe(gulp.dest(distPath));
return stream;
});
gulp.task('build:minify-images', ['build:cleanfolder', 'build:cleanfiles'], function() {
var stream = gulp.src('./src/images/**/*.{png,gif,jpg,svg}')
.pipe(minifyImages())
.pipe(gulp.dest(distPath + '/images'));
return stream;
});
gulp.task('build:sass', ['build:cleanfolder', 'build:cleanfiles'], function() {
var stream = gulp.src('./src/sass/**/*.scss')
.pipe(sass({outputStyle: 'compressed'}))
.pipe(gulp.dest(distPath + '/css'))
return stream;
});
gulp.task('build:serve', function() {
browserSync.init({
server: {
baseDir: distPath
},
notify: false
});
});
gulp.task('build', ['build:sass', 'build:usemin', 'build:minify-images']);
As per the documentation
If you need to call the same pipeline twice, you need to define each task as a function that returns the stream object that should be used.
Therefore:
gulp.task('build:usemin', ['build:cleanfolder', 'build:cleanfiles'], function() {
var stream = gulp.src('./src/**/*.html')
.pipe(useMin({
css: [minifyCss(), 'concat'],
js: [minifyJs(), 'concat'],
html: [ function(){ return minifyHtml({collapseWhitespace: true});} ]
}))
.pipe(gulp.dest(distPath));
return stream;
});

Why is gulp complaining about Maximum call stack size exceeded?

I am writting a gulp tasks where I take several js file , concat them , minify those.. same with scss into css etc ...normal stuffs
And, it is for Drupal 8
Here is my gulpfile. However on running this, I keep on getting the following error:
[10:00:58] Starting 'scripts'...
events.js:160
throw er; // Unhandled 'error' event
^
RangeError: Maximum call stack size exceeded
at Object.TreeWalker._visit (eval at <anonymous> (/Applications/MAMP/htdocs/novaent/node_modules/uglify-js/tools/node.js:1:0), <anonymous>:1255:21)
'use strict';
And below is my gulp file
// Include gulp.
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var config = require('./config.json');
// Include plugins.
var sass = require('gulp-sass');
var imagemin = require('gulp-imagemin');
var pngcrush = require('imagemin-pngcrush');
var shell = require('gulp-shell');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var autoprefix = require('gulp-autoprefixer');
var glob = require('gulp-sass-glob');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
// sassOptions are optional but things like sourceComments (line_comments) can be pretty handy.
var sassOptions = {
errLogToConsole: true,
outputStyle: 'compressed',
sourceComments: 'line_comments',
includePaths: config.css.includePaths
};
// CSS.
gulp.task('css', function() {
return gulp.src(config.css.src)
.pipe(glob())
.pipe(plumber({
errorHandler: function (error) {
notify.onError({
title: 'Gulp',
subtitle: 'Failure!',
message: 'Error: <%= error.message %>',
sound: 'Beep'
})(error);
this.emit('end');
}}))
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(autoprefix('last 2 versions', '> 1%', 'ie 9', 'ie 10'))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest(config.css.dest))
.pipe(browserSync.reload({stream: true, injectChanges: true, match: '**/*.css'}));
});
// Compress images.
gulp.task('images', function () {
return gulp.src(config.images.src)
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngcrush()]
}))
.pipe(gulp.dest(config.images.dest));
});
// Fonts.
gulp.task('fonts', function() {
return gulp.src(config.fonts.src)
.pipe(gulp.dest(config.fonts.dest));
});
// javaScripts
gulp.task('scripts', function() {
return gulp.src(config.js.src)
.pipe(concat('index.js'))
.pipe(gulp.dest(config.js.dest)) // outputs *.js without min
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest(config.js.dest)) // outputs *.js.min
.pipe(notify({message: 'Rebuild all custom scripts'}));
});
// Watch task.
gulp.task('watch', function () {
gulp.watch(config.css.src, ['css']);
gulp.watch(config.fonts.src, ['fonts']);
gulp.watch(config.js.src, ['scripts']);
gulp.watch(config.images.src, ['images']);
});
// Static Server + Watch
gulp.task('serve', ['css', 'fonts', 'watch'], function () {
browserSync.init({
proxy: config.proxy
});
});
// Run drush to clear the theme registry.
gulp.task('drush', shell.task([
'drush cache-clear theme-registry'
]));
// Default Task
gulp.task('default', ['serve']);
I think I have solved it as below
'use strict';
// Include gulp.
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var config = require('./config.json');
// Include plugins.
var sass = require('gulp-sass');
var imagemin = require('gulp-imagemin');
var pngcrush = require('imagemin-pngcrush');
var shell = require('gulp-shell');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var autoprefix = require('gulp-autoprefixer');
var glob = require('gulp-sass-glob');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
var sassOptions = {
errLogToConsole: true,
outputStyle: 'compressed',
sourceComments: 'line_comments',
includePaths: config.css.includePaths
};
var uglifyOptions = {
preserveComments: 'license',
warnings: 'true'
};
// CSS.
gulp.task('css', function() {
return gulp.src(config.css.src)
.pipe(glob())
.pipe(plumber({
errorHandler: function (error) {
notify.onError({
title: 'Gulp',
subtitle: 'Failure!',
message: 'Error: <%= error.message %>',
sound: 'Beep'
})(error);
this.emit('end');
}}))
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(autoprefix('last 2 versions', '> 1%', 'ie 9', 'ie 10'))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest(config.css.dest))
.pipe(browserSync.reload({stream: true, injectChanges: true, match: '**/*.css'}));
});
// Compress images.
gulp.task('images', function () {
return gulp.src(config.images.src)
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngcrush()]
}))
.pipe(gulp.dest(config.images.dest));
});
// Fonts.
gulp.task('fonts', function() {
return gulp.src(config.fonts.src)
.pipe(gulp.dest(config.fonts.dest));
});
// Concat all js files into one index.min.js file
gulp.task('scripts', function() {
return gulp.src(config.js.src)
.pipe(concat('./js/index.js'))
.pipe(gulp.dest('./js/'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify(uglifyOptions))
.pipe(gulp.dest('./assets/dist/'))
.pipe(notify({message: 'Rebuild all custom scripts. Please refresh your browser'}));
});
// Watch task.
gulp.task('watch', function () {
gulp.watch(config.css.src, ['css']);
gulp.watch(config.fonts.src, ['fonts']);
gulp.watch(config.js.src, ['scripts']);
gulp.watch(config.images.src, ['images']);
});
// Static Server + Watch
gulp.task('serve', ['css', 'fonts', 'scripts', 'watch'], function () {
browserSync.init({
proxy: config.proxy
});
});
// Run drush to clear the theme registry.
gulp.task('drush', shell.task([
'drush cache-clear theme-registry'
]));
// Default Task
gulp.task('default', ['serve']);

How to Minify ES6 Using Gulp

I am relatively new to writing a gulpfile.js manually. I have a Backbone and Marionette based project where the gulp file so far looked like the following:
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var browserify = require('browserify');
var del = require('del');
var watchify = require('watchify');
var source = require('vinyl-source-stream');
var stylish = require('jshint-stylish');
var buffer = require('vinyl-buffer');
var _ = require('lodash');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
gulp.task('clean', function(cb) {
return del([
'app/tmp'
], cb);
});
gulp.task('html', function() {
return gulp.src('./src/index.html')
.pipe($.plumber())
.pipe(gulp.dest('./dist'));
});
gulp.task('images', function() {
gulp.src(['./src/assets/images/*.jpg', './src/assets/images/*.svg', './src/assets/images/*.gif',
'./src/assets/images/*.png'
])
.pipe(gulp.dest('./dist/images'));
});
gulp.task('vendor-css', function() {
gulp.src(['./src/assets/styles/vendor/*.css'
])
.pipe(gulp.dest('./dist'));
});
gulp.task('fonts', function() {
gulp.src(['./src/assets/fonts/*.eot', './src/assets/fonts/*.woff', './src/assets/fonts/*.ttf',
'./src/assets/fonts/*.svg'
])
.pipe(gulp.dest('./dist/fonts'));
});
gulp.task('styles', function() {
return gulp.src('./src/main.styl')
.pipe($.stylus())
.pipe($.autoprefixer())
.pipe($.rename('bundle.css'))
.pipe(gulp.dest('./dist'))
.pipe(reload({ stream: true }));
});
var bundler = _.memoize(function(watch) {
var options = {debug: true};
if (watch) {
_.extend(options, watchify.args);
}
var b = browserify('./src/main.js', options);
if (watch) {
b = watchify(b);
}
return b;
});
var handleErrors = function() {
var args = Array.prototype.slice.call(arguments);
delete args[0].stream;
$.util.log.apply(null, args);
this.emit('end');
};
function bundle(cb, watch) {
return bundler(watch).bundle()
.on('error', handleErrors)
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe($.sourcemaps.init({ loadMaps: true }))
.pipe($.sourcemaps.write('./'))
.pipe(gulp.dest('./dist'))
.on('end', cb)
.pipe(reload({ stream: true }));
}
gulp.task('scripts', function(cb) {
bundle(cb, true);
});
gulp.task('jshint', function() {
return gulp.src(['./src/**/*.js', './test/**/*.js'])
.pipe($.plumber())
.pipe($.jshint())
.pipe($.jshint.reporter(stylish));
});
var reporter = 'spec';
gulp.task('mocha', ['jshint'], function() {
return gulp.src([
'./test/setup/node.js',
'./test/setup/helpers.js',
'./test/unit/**/*.js'
], { read: false })
.pipe($.plumber())
.pipe($.mocha({ reporter: reporter }));
});
gulp.task('build', [
'clean',
'html',
'images',
'vendor-css',
'fonts',
'styles',
'scripts',
'test'
]);
gulp.task('test', [
'jshint'
]);
gulp.task('watch', ['build'], function() {
browserSync.init({
server: {
baseDir: 'dist'
}
});
reporter = 'dot';
bundler(true).on('update', function() {
gulp.start('scripts');
gulp.start('test');
});
gulp.watch('./test/**/*.js', ['test']);
gulp.watch(['./src/main.styl', './src/pages/**/*.styl', './src/assets/styles/*.styl'], ['styles']);
gulp.watch(['./src/*.html'], ['html']);
});
gulp.task('default', ['watch']);
Now I need to enable minification of Javascript for which I referred to the following link. I am using the one with uglify-js-harmony as the minifier for ES6 support since most of my code is using ES6 syntax. The modified gulp file looks like the following:
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var browserify = require('browserify');
var del = require('del');
var watchify = require('watchify');
var source = require('vinyl-source-stream');
var stylish = require('jshint-stylish');
var buffer = require('vinyl-buffer');
var uglifyjs = require('uglify-js-harmony');
var minifier = require('gulp-uglify/minifier');
var pump = require('pump');
var _ = require('lodash');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
gulp.task('clean', function(cb) {
return del([
'app/tmp'
], cb);
});
gulp.task('html', function() {
return gulp.src('./src/index.html')
.pipe($.plumber())
.pipe(gulp.dest('./dist'));
});
gulp.task('images', function() {
gulp.src(['./src/assets/images/*.jpg', './src/assets/images/*.svg', './src/assets/images/*.gif',
'./src/assets/images/*.png'
])
.pipe(gulp.dest('./dist/images'));
});
gulp.task('vendor-css', function() {
gulp.src(['./src/assets/styles/vendor/*.css'
])
.pipe(gulp.dest('./dist'));
});
gulp.task('fonts', function() {
gulp.src(['./src/assets/fonts/*.eot', './src/assets/fonts/*.woff', './src/assets/fonts/*.ttf',
'./src/assets/fonts/*.svg'
])
.pipe(gulp.dest('./dist/fonts'));
});
gulp.task('styles', function() {
return gulp.src('./src/main.styl')
.pipe($.stylus())
.pipe($.autoprefixer())
.pipe($.rename('bundle.css'))
.pipe(gulp.dest('./dist'))
.pipe(reload({ stream: true }));
});
var bundler = _.memoize(function(watch) {
var options = {debug: true};
if (watch) {
_.extend(options, watchify.args);
}
var b = browserify('./src/main.js', options);
if (watch) {
b = watchify(b);
}
return b;
});
var handleErrors = function() {
var args = Array.prototype.slice.call(arguments);
delete args[0].stream;
$.util.log.apply(null, args);
this.emit('end');
};
function bundle(cb, watch) {
return bundler(watch).bundle()
.on('error', handleErrors)
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe($.sourcemaps.init({ loadMaps: true }))
.pipe($.sourcemaps.write('./'))
.pipe(gulp.dest('./dist'))
.on('end', cb)
.pipe(reload({ stream: true }));
}
gulp.task('scripts', function(cb) {
bundle(cb, true);
});
gulp.task('jshint', function() {
return gulp.src(['./src/**/*.js', './test/**/*.js'])
.pipe($.plumber())
.pipe($.jshint())
.pipe($.jshint.reporter(stylish));
});
gulp.task('compress', function (cb) {
var options = {
preserveComments: 'license'
};
pump([
gulp.src('./dist/bundle.js'),
minifier(options, uglifyjs),
gulp.dest('./dist')
],
cb
);
});
var reporter = 'spec';
gulp.task('mocha', ['jshint'], function() {
return gulp.src([
'./test/setup/node.js',
'./test/setup/helpers.js',
'./test/unit/**/*.js'
], { read: false })
.pipe($.plumber())
.pipe($.mocha({ reporter: reporter }));
});
gulp.task('build', [
'clean',
'html',
'images',
'vendor-css',
'fonts',
'styles',
'scripts',
'test',
'compress'
]);
gulp.task('test', [
'jshint'
]);
gulp.task('watch', ['build'], function() {
browserSync.init({
server: {
baseDir: 'dist'
}
});
reporter = 'dot';
bundler(true).on('update', function() {
gulp.start('scripts');
gulp.start('test');
});
gulp.watch('./test/**/*.js', ['test']);
gulp.watch(['./src/main.styl', './src/pages/**/*.styl', './src/assets/styles/*.styl'], ['styles']);
gulp.watch(['./src/*.html'], ['html']);
});
gulp.task('default', ['watch']);
Now, when I run gulp the task for compressing starts, does not give any error but never finishes and the build (dist) is made same as before (no minification happens!) . Do I need to somehow integrate this compression task into the bundle function using another .pipe or am I doing something else in a wrong way here ?
Also, is it correct to do the minification after the bundle.js is created which is what am attempting to do here or does it need to be at the stage when the source files are still not concatenated ?
Clone https://github.com/terinjokes/gulp-uglify/
Locate https://github.com/terinjokes/gulp-uglify/blob/80da765a266cb7ff9d034a73bde0abe18d72d6de/package.json#L13 in prefered checkout (prefered latest)
Set version for uglify-js to mishoo/UglifyJS2#harmony (shortcut for https://github.com/mishoo/UglifyJS2#harmony)
Note that this is a temporary set-up until there is an official release of uglify supporting harmony
Try using babili ES6+ minifier - https://github.com/babel/babili
just pass babili as preset option using babel
.pipe('*.js', babel({presets: ['babili']}))

What's responsible for creating the filename signature in this Gulp task?

When I run gulp build it creates a file with a name like this:
dist/scripts/app-f3c1dbf348.js
The f3c1dbf348 part is something different every time. Obviously something is making this happen but it's not clear to me what.
Below is my gulp/build.js. What there (if anything there) is generating the f3c1dbf348 part of the filename? I want the filename just to be app.js because my concatenated .js file needs to be included as a Bower component.
'use strict';
var path = require('path');
var gulp = require('gulp');
var conf = require('./conf');
var $ = require('gulp-load-plugins')({
pattern: ['gulp-*', 'main-bower-files', 'uglify-save-license', 'del']
});
gulp.task('partials', function () {
return gulp.src([
path.join(conf.paths.src, '/app/**/*.html'),
path.join(conf.paths.tmp, '/serve/app/**/*.html')
])
.pipe($.minifyHtml({
empty: true,
spare: true,
quotes: true
}))
.pipe($.angularTemplatecache('templateCacheHtml.js', {
module: 'lmsComponents',
root: 'app'
}))
.pipe(gulp.dest(conf.paths.tmp + '/partials/'));
});
gulp.task('html', ['inject', 'partials'], function () {
var partialsInjectFile = gulp.src(path.join(conf.paths.tmp, '/partials/templateCacheHtml.js'), { read: false });
var partialsInjectOptions = {
starttag: '<!-- inject:partials -->',
ignorePath: path.join(conf.paths.tmp, '/partials'),
addRootSlash: false
};
var htmlFilter = $.filter('*.html', { restore: true });
var jsFilter = $.filter('**/*.js', { restore: true });
var cssFilter = $.filter('**/*.css', { restore: true });
var assets;
return gulp.src(path.join(conf.paths.tmp, '/serve/*.html'))
.pipe($.inject(partialsInjectFile, partialsInjectOptions))
.pipe(assets = $.useref.assets())
.pipe($.rev())
.pipe(jsFilter)
.pipe($.sourcemaps.init())
.pipe($.ngAnnotate())
.pipe($.uglify({ preserveComments: $.uglifySaveLicense })).on('error', conf.errorHandler('Uglify'))
.pipe($.sourcemaps.write('maps'))
.pipe(jsFilter.restore)
.pipe(cssFilter)
.pipe($.sourcemaps.init())
.pipe($.replace('../../bower_components/bootstrap-sass/assets/fonts/bootstrap/', '../fonts/'))
.pipe($.minifyCss({ processImport: false }))
.pipe($.sourcemaps.write('maps'))
.pipe(cssFilter.restore)
.pipe(assets.restore())
.pipe($.useref())
.pipe($.revReplace())
.pipe(htmlFilter)
.pipe($.minifyHtml({
empty: true,
spare: true,
quotes: true,
conditionals: true
}))
.pipe(htmlFilter.restore)
.pipe(gulp.dest(path.join(conf.paths.dist, '/')))
.pipe($.size({ title: path.join(conf.paths.dist, '/'), showFiles: true }));
});
// Only applies for fonts from bower dependencies
// Custom fonts are handled by the "other" task
gulp.task('fonts', function () {
return gulp.src($.mainBowerFiles())
.pipe($.filter('**/*.{eot,svg,ttf,woff,woff2}'))
.pipe($.flatten())
.pipe(gulp.dest(path.join(conf.paths.dist, '/fonts/')));
});
gulp.task('other', function () {
var fileFilter = $.filter(function (file) {
return file.stat.isFile();
});
return gulp.src([
path.join(conf.paths.src, '/**/*'),
path.join('!' + conf.paths.src, '/**/*.{html,css,js,scss}')
])
.pipe(fileFilter)
.pipe(gulp.dest(path.join(conf.paths.dist, '/')));
});
gulp.task('clean', function () {
return $.del([path.join(conf.paths.dist, '/'), path.join(conf.paths.tmp, '/')]);
});
gulp.task('build', ['html', 'fonts', 'other']);
It was this line:
.pipe($.rev())

Trying to build to correct directory using gulp

I used yeoman webapp to start my website. The goal is to make it
<script src=./scripts/vendor.js></script>
<script src=./scripts/main.js></script>
For my html files in another folder.
This my gulp file:
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var browserSync = require('browser-sync');
var reload = browserSync.reload;
gulp.task('styles', function () {
return gulp.src('app/styles/main.scss')
.pipe($.sourcemaps.init())
.pipe($.sass({
outputStyle: 'nested', // libsass doesn't support expanded yet
precision: 10,
includePaths: ['.'],
onError: console.error.bind(console, 'Sass error:')
}))
.pipe($.postcss([
require('autoprefixer-core')({browsers: ['last 1 version']})
]))
.pipe($.sourcemaps.write())
.pipe(gulp.dest('.tmp/styles'))
.pipe(reload({stream: true}));
});
gulp.task('jshint', function () {
return gulp.src('app/scripts/**/*.js')
.pipe(reload({stream: true, once: true}))
.pipe($.jshint())
.pipe($.jshint.reporter('jshint-stylish'))
.pipe($.if(!browserSync.active, $.jshint.reporter('fail')));
});
gulp.task('html', ['styles'], function () {
var assets = $.useref.assets({searchPath: ['.tmp', 'app', '.']});
return gulp.src('app/*.html')
.pipe(assets)
.pipe($.if('*.js', $.uglify()))
.pipe($.if('*.css', $.csso()))
.pipe(assets.restore())
.pipe($.useref())
.pipe($.if('*.html', $.minifyHtml({conditionals: true, loose: true})))
.pipe(gulp.dest('dist'));
});
gulp.task('images', function () {
return gulp.src('app/images/**/*')
.pipe($.cache($.imagemin({
progressive: true,
interlaced: true,
// don't remove IDs from SVGs, they are often used
// as hooks for embedding and styling
svgoPlugins: [{cleanupIDs: false}]
})))
.pipe(gulp.dest('dist/images'));
});
gulp.task('fonts', function () {
return gulp.src(require('main-bower-files')({
filter: '**/*.{eot,svg,ttf,woff,woff2}'
}).concat('app/fonts/**/*'))
.pipe(gulp.dest('.tmp/fonts'))
.pipe(gulp.dest('dist/fonts'));
});
gulp.task('extras', function () {
return gulp.src([
'app/*.*',
'!app/*.html',
'app/'+'**/*.html'
], {
dot: true
}).pipe(gulp.dest('dist'));
});
gulp.task('clean', require('del').bind(null, ['.tmp', 'dist']));
gulp.task('serve', ['styles', 'fonts'], function () {
browserSync({
notify: false,
port: 9000,
server: {
baseDir: ['.tmp', 'app'],
routes: {
'/bower_components': 'bower_components'
}
}
});
// watch for changes
gulp.watch([
'app/*.html',
'app/'+'**/*.html',
'app/scripts/**/*.js',
'app/images/**/*',
'.tmp/fonts/**/*'
]).on('change', reload);
gulp.watch('app/styles/**/*.scss', ['styles']);
gulp.watch('app/fonts/**/*', ['fonts']);
gulp.watch('bower.json', ['wiredep', 'fonts']);
});
// inject bower components
gulp.task('wiredep', function () {
var wiredep = require('wiredep').stream;
gulp.src('app/styles/*.scss')
.pipe(wiredep({
ignorePath: /^(\.\.\/)+/
}))
.pipe(gulp.dest('app/styles'));
gulp.src(['app/*.html', 'app/'+'**/*.html'])
.pipe(wiredep({
exclude: ['bootstrap-sass-official'],
ignorePath: /^(\.\.\/)*\.\./
}))
.pipe(gulp.dest('app'));
});
gulp.task('build', ['jshint', 'html', 'images', 'fonts', 'extras'], function () {
return gulp.src('dist/**/*').pipe($.size({title: 'build', gzip: true}));
});
gulp.task('default', ['clean'], function () {
gulp.start('build');
});
I think the problem is somewhere when it tries to uglify. welp!

Categories