Gulp-rev-collector doesn't work properly - gulp

I don't understand what's wrong with this code. When I run it for the first time, rev_collector doesn't work. I mean: 'rev' and 'clean' works great, but css file name in index http didn't change ('rev_collector').
BUT it works properly when I start it again.
var gulp = require('gulp'),
less = require('gulp-less'),
rev_append = require('gulp-rev-append'),
rev = require('gulp-rev'),
revCollector = require('gulp-rev-collector'),
gutil = require('gulp-util'),
rimraf = require('rimraf'),
revOutdated = require('gulp-rev-outdated'),
path = require('path'),
through = require('through2');
gulp.task('rev', function(){
gulp.src('./src/less/*.less')
.pipe(less())
.pipe(rev())
.pipe(gulp.dest('./www/css/'))
.pipe(rev.manifest())
.pipe(gulp.dest('./src/manifest/'));
});
gulp.task('rev_collector', ['rev'], function(){
return gulp.src(['./src/manifest/**/*.json', './www/index.html'])
.pipe(revCollector({
replaceReved: true
}))
.pipe(gulp.dest('./www/'));
});
function cleaner() {
return through.obj(function(file, enc, cb){
rimraf( path.resolve( (file.cwd || process.cwd()), file.path), function (err) {
if (err) {
this.emit('error', new gutil.PluginError('Cleanup old files', err));
}
this.push(file);
cb();
}.bind(this));
});
}
gulp.task('clean', ['rev_collector'], function() {
gulp.src( ['./www/**/*.*'], {read: false})
.pipe( revOutdated(1) ) // leave 2 latest asset file for every file name prefix.
.pipe( cleaner() );
return;
});
gulp.task('rev_all', ['rev', 'rev_collector', 'clean']);

Today, I met the same problem.
After I got nothing from this page, I searched a lot.
I fount my problom came from the order the files loaded.
So I use a new plugin:
var runSequence = require('run-sequence');
then, I rewrite the load code:
gulp.task('default',['build']);
gulp.task('build', function (done) {
runSequence(
['clean'],
['images'],
['statcstyles', 'staticjs'],
['scripts'],
['styles'],
['html'],
done);
});
The code make sure that revCollector will always loaded after manifest create.
Then my problem solved.
I hope it helps you.

Related

Using dependancies in package.json

At my internship I had to make a starter using dependancies inside a package.json . And somehow , I could delete the node modules and still run gulp, async and other things you can see in there. Now , I have gulp installed globaly andn i have these dependancies written but when I remove node_modules , terminal says it doesn't recognise gulp. Is there a way to do this ?
The reason for removing node_modules was that it is a really big folder and as I needed to transfer my projects , they showed my how to remove it .
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var runSequence = require('run-sequence');
var iconfont = require('gulp-iconfont');
var async = require('async');
var consolidate = require('gulp-consolidate');
var sassLint = require('gulp-sass-lint');
gulp.task('sass', function(){
return gulp.src('app/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('app/css'))
});
gulp.task('sass-lint', function () {
return gulp.src('app/scss/**/*.s+(a|c)ss')
.pipe(sassLint())
.pipe(sassLint.format())
.pipe(sassLint.failOnError())
});
gulp.task('watch', ['sass'], function (){
gulp.watch('app/scss/**/*.scss', ['sass' , 'sass-lint' ]);
});
gulp.task('build', function (callback) {
runSequence(['sass'],
callback
)
});
gulp.task('iconfont', function(done){
var iconStream = gulp.src(['app/images/svg/*.svg'])
.pipe(iconfont({
fontName: 'icons',
}));
async.parallel([
function handleGlyphs(cb) {
iconStream.on('glyphs', function(glyphs, options) {
gulp.src('conf/_iconfont-template.scss')
.pipe(consolidate('lodash', {
glyphs: glyphs,
fontName: 'icons',
fontPath: '../fonts/',
className: 's'
}))
.pipe(gulp.dest('app/scss/utilities/'))
.on('finish', cb);
});
},
function handleFonts (cb) {
iconStream
.pipe(gulp.dest('app/fonts/'))
.on('finish', cb);
}
], done);
});
This is my gulpfile.js.
P.S. This also made it so I dont have to install erything everytime . Just do it once , and I can copy the starter.
Ok so i managed to solve the issue . Gulp was updated to version 4 so I needed to change the code and use
gulp.task('watch', gulp.series('sass'), function (){
gulp.watch('app/scss/**/*.scss', gulp.series(gulp.parallel('sass' , 'sass-lint' )));
});

Occassional Gulpfile freakout using gulp-changed and/or gulp-newer and and upload task

I've written a nice little build script that runs some pretty standard tasks like...
Cleaning out my deploy/ directory before initially
Building, concatenation, uglifying, and copying files from their dev/ directories to associated deploy/ directories
Watching for changes
etc.
But for better context, I've included just included it below:
var gulp = require('gulp');
var changed = require('gulp-changed');
var newer = require('gulp-newer');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var cssmin = require('gulp-minify-css');
var sourcemaps = require('gulp-sourcemaps');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var notify = require('gulp-notify');
var plumber = require('gulp-plumber');
var imagemin = require('gulp-imagemin');
var shopify = require('gulp-shopify-upload');
var watch = require('gulp-watch');
var rename = require('gulp-rename');
var filter = require('gulp-filter');
var flatten = require('gulp-flatten');
var del = require('del');
var argv = require('yargs').argv;
var runsequence = require('run-sequence');
var config = require('./config.json');
var plumberErrorHandler = {
errorHandler: notify.onError({
title: 'Gulp',
message: "Error: <%= error.message %>"
})
};
gulp.task('styles', function() {
return gulp.src(['dev/styles/updates.scss'])
.pipe(plumber(plumberErrorHandler))
.pipe(sourcemaps.init())
.pipe(sass({ errLogToConsole: true }))
.pipe(autoprefixer({ browsers: ['last 2 versions', 'ie >= 10', 'Android >= 4.3'] }))
.pipe(cssmin())
.pipe(sourcemaps.write())
.pipe(rename({ suffix: '.css', extname: '.liquid' }))
.pipe(gulp.dest('deploy/assets'));
});
gulp.task('scripts', function() {
return gulp.src(['dev/scripts/**'])
.pipe(plumber(plumberErrorHandler))
.pipe(sourcemaps.init())
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(sourcemaps.write())
.pipe(rename({ suffix: '.js', extname: '.liquid' }))
.pipe(gulp.dest('deploy/assets'));
});
gulp.task('vendor', function() {
var styles = filter(['styles/**/*.scss']);
var scripts = filter(['scripts/**/*.js']);
return gulp.src(['dev/vendor/**'])
.pipe(plumber(plumberErrorHandler))
.pipe(styles)
.pipe(sass({ errLogToConsole: true }))
.pipe(cssmin())
.pipe(styles.restore())
.pipe(scripts)
.pipe(concat('vendor.js'))
.pipe(uglify())
.pipe(scripts.restore())
.pipe(flatten())
.pipe(gulp.dest('deploy/assets'));
});
gulp.task('copy', function() {
return gulp.src(['dev/liquid/**'], {base: 'dev/liquid'})
.pipe(plumber(plumberErrorHandler))
.pipe(newer('deploy/'))
.pipe(gulp.dest('deploy/'));
});
gulp.task('clean', function(cb) {
del(['deploy/**/*'], cb);
});
gulp.task('imagemin', function() {
return gulp.src(['dev/liquid/assets/*'])
.pipe(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true }))
.pipe(gulp.dest('dev/liquid/assets/'));
});
gulp.task('build', ['clean'], function(cb) {
runsequence(['copy', 'styles', 'scripts', 'vendor'], cb);
});
gulp.task('watch', ['build'], function() {
gulp.watch(['dev/styles/**/*.scss'], ['styles']);
gulp.watch(['dev/scripts/**/*.js'], ['scripts']);
gulp.watch(['dev/vendor/**/*.{js,scss}'], ['vendor']);
gulp.watch(['dev/liquid/**'], ['copy']);
});
gulp.task('upload', ['watch'], function() {
if (!argv.env) {
return false;
} else if (argv.env && config.shopify.hasOwnProperty(argv.env)) {
env = config.shopify[argv.env];
} else {
env = config.shopify.dev;
}
return watch('deploy/{assets|layout|config|snippets|templates|locales}/**')
.pipe(shopify(env.apiKey, env.password, env.url, env.themeId, env.options));
});
gulp.task('default', ['clean', 'build', 'watch', 'upload']);
The problem I've been running into is directly related to the upload task and copy task.
When running gulp --env [environment-name] (e.g. gulp --env staging) or just gulp --env, some of the time when I save a file living in one of the subdirectories of dev/liquid/, the copy task runs as expected, and the singular saved and copied file is then uploaded via. the upload task. However, occasionally I'll save a file and the copy task runs as usual, but then the watch upload freaks out and tries uploading every file inside of deploy/ (which causes an api call limit error, which naturally gives me problems).
I originally had used gulp-changed inside of my copy task, but then noticed that it only will do 1:1 mappings and not directories (not sure how correct I am on this). So I switched to gulp-newer, and things worked for a while, but then things started freaking out again.
I can't figure out what's causing this, I have my suspicions but I can't figure out how to act on them. Any advice, observations, suggestions for improvements, good places for a romantic dinner, reliable pet-sitter, etc. would be greatly appreciated.
tytytytyty!!!
_t
Edit: I've been having a hard time reproducing the freakout (i.e. all files trying to upload at once), and at times running the same gulp --env staging causes a freak out, and other times firing up the same task on the same set of files does nothing. Maybe it could possibly have something to do with gulp-newer and gulp-changed's use of date modified as its comparison??
Double Edit: Maybe it's a race condition cause it works sometimes, and sometimes not? I remember seeing something on the node-glob or minimatch github pages about race conditions....

Gulp not watching files with gulp-watch plugin

I'm trying to rebuild only files that change in my gulpfile.js by using this recipe via the gulp-watch plugin. The problem is when I run my default task gulp, it doesn't watch the files at all after saving any of the files I want it to watch. What am I doing wrong here in my gulpfile.js? Thanks in advance.
/* ----------------------------------------------------- */
/* Gulpfile.js
/* ----------------------------------------------------- */
'use strict';
// Setup modules/Gulp plugins
var gulp = require('gulp'),
del = require('del'),
runSequence = require('run-sequence'),
less = require('gulp-less'),
// minifyCSS = require('gulp-minify-css'),
fileinclude = require('gulp-file-include'),
order = require('gulp-order'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
sourcemaps = require('gulp-sourcemaps'),
imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
plumber = require('gulp-plumber'),
watch = require('gulp-watch'),
// browserify = require('browserify'),
// sourceStream = require('vinyl-source-stream'),
connect = require('gulp-connect');
// Configure file paths
var path = {
DEST: 'dist/',
SRC: 'src/',
INCLUDES: 'include/',
LESS_SRC: 'src/frontend/less/',
LESS_MANIFEST: 'src/frontend/less/all.less',
CSS_DEST: 'dist/frontend/css/',
JS_SRC: 'src/frontend/js/',
JS_MINIFIED_OUT: 'all.js',
JS_DEST: 'dist/frontend/js',
IMG_SRC: 'src/frontend/img/',
IMG_DEST: 'dist/frontend/img/',
};
// Clean out build folder each time Gulp runs
gulp.task('clean', function (cb) {
del([
path.DEST
], cb);
});
// Compile LESS
gulp.task('less', function(){
return gulp.src(path.LESS_MANIFEST)
.pipe(watch(path.LESS_MANIFEST))
.pipe(plumber({
handleError: function (err) {
console.log(err);
this.emit('end');
}
}))
.pipe(sourcemaps.init())
.pipe(less())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(path.CSS_DEST))
.pipe(connect.reload());
});
// Allow HTML files to be included
gulp.task('html', function() {
return gulp.src([path.SRC + '*.html'])
.pipe(watch(path.SRC + '*.html'))
.pipe(plumber({
handleError: function (err) {
console.log(err);
this.emit('end');
}
}))
.pipe(fileinclude({
prefix: '##',
basepath: path.INCLUDES
}))
.pipe(gulp.dest(path.DEST))
.pipe(connect.reload());
});
// Concatenate and minify JavaScript
gulp.task('js', function() {
return gulp.src(path.JS_SRC + '**/*.js')
.pipe(watch(path.JS_SRC + '**/*.js'))
.pipe(order([
path.JS_SRC + 'framework/*.js',
path.JS_SRC + 'vendor/*.js',
path.JS_SRC + 'client/*.js'
], {base: '.'} ))
.pipe(concat(path.JS_MINIFIED_OUT))
.pipe(uglify())
.pipe(gulp.dest(path.JS_DEST))
.pipe(connect.reload());
});
// Minify images
gulp.task('imagemin', function () {
return gulp.src(path.IMG_SRC + '**/*')
.pipe(imagemin({
progressive: true,
use: [pngquant()]
}))
.pipe(gulp.dest(path.IMG_DEST));
});
// Copy folders
gulp.task('copy', function() {
gulp.src(path.SRC + 'extjs/**/*')
.pipe(gulp.dest(path.DEST + 'extjs/'));
// Copy all Bower components to build folder
gulp.src('bower_components/**/*')
.pipe(gulp.dest('dist/bower_components/'));
});
// Connect to a server and livereload pages
gulp.task('connect', function() {
connect.server({
root: path.DEST,
livereload: true
});
});
// Organize build tasks into one task
gulp.task('build', ['less', 'html', 'js', 'imagemin', 'copy']);
// Organize server tasks into one task
gulp.task('server', ['connect']);
// Default task
gulp.task('default', function(cb) {
// Clean out dist/ folder before everything else
runSequence('clean', ['build', 'server'],
cb);
});
Try and remove the watch from your build tasks, and have separate tasks that handle the watching. Something like:
gulp.task("watch-less", function() {
watch(path.LESS_MANIFEST, function () {
gulp.start("less");
));
});
That way, it'll just trigger the task when a file changes. And the task for watching is able to be run separate from your build (which will also make your life easier if you use some form of build automation).
Also, you can specify many watch tasks, like so:
gulp.task("watch", function() {
watch(paths.FOO, function() {
gulp.start("foo");
});
watch(paths.BAR, function() {
gulp.start("bar");
});
});

How can I input and output multiple files with gulp and browserify

I'm sure there's a way to do this, but I couldn't find it. What I want is to pass multiple files into browserify and output multiple files - this is useful for a case where a site has multiple SPA's, with each having its own requires.
Say I have app1.js, app2.js, etc, with each loading in different pages and having independent require('..') statements. I'm looking for a task that does something like this:
gulp.task('browserify', function() {
return
gulp.src('src/**/*.js')
.pipe(browserify) //
.pipe(gulp.dest('dist'));
});
Any idea what's a simple way to accomplish this? thanks.
I stumbled upon this problem actually earlier this week. The problem of "creating multiple bundles". This should work:
var gulp = require('gulp'),
source = require('vinyl-source-stream'),
browserify = require('browserify'),
es = require('event-stream');
gulp.task('default', function() {
// Your main files
var files = [
'./app/main-a.js',
'./app/main-b.js'
];
// Create a stream array
var tasks = files.map(function(entry) {
return browserify({ entries: [entry] })
.bundle()
.pipe(source(entry))
.pipe(gulp.dest('./dist'));
});
return es.merge.apply(null, tasks);
});
Please do not use the gulp-browserify plugin, as it's blacklisted by now. Use browserify itself instead.
Same with Globs:
gulp.task('withglob', function() {
return glob('./app/main-**.js', function(err, files) {
var tasks = files.map(function(entry) {
return browserify({ entries: [entry] })
.bundle()
.pipe(source(entry))
.pipe(rename({
extname: '.bundle.js'
}))
.pipe(gulp.dest('./dist'));
});
return es.merge.apply(null, tasks);
})
});
Btw.: That's the reason

Sequencing tasks with gulp

I'm a bit stumped with gulp. Based on the docs, in order to get sequential execution, I should be returning the stream from my tasks, so i tried to do the below for my gulpfile. But as best I can tell, there's a race condition. Half the time I get ENOENT, lstat errors, the other half it succeeds, but my deployDir has weird folder names and missing files all over.. Am I missing something? Is there a trick to this?
var gulp = require('gulp'),
filter = require('gulp-filter'),
mainBowerFiles = require('main-bower-files'),
del = require('del'),
inject = require("gulp-inject"),
uglify = require('gulp-uglifyjs');
var config = {
bowerDir: 'src/main/html/bower_components',
cssDir: 'src/main/html/css/lib',
fontsDir: 'src/main/html/fonts/lib',
imgDir: 'src/main/html/img/lib',
jsDir: 'src/main/html/js/lib',
deployDir: 'src/main/resources/html'
};
gulp.task('default', ['clean', 'bowerdeps', 'dev']);
gulp.task('clean', function() {
return del([
config.cssDir,
config.fontsDir,
config.jsDir,
config.deployDir
]);
});
gulp.task('dev', function() {
return gulp
.src(['src/main/html/**', '!src/main/html/{bower_components,bower_components/**}'])
.pipe(gulp.dest(config.deployDir));
});
gulp.task('bowerdeps', function() {
var mainFiles = mainBowerFiles();
if(!mainFiles.length) return; // No files found
var jsFilter = filterByRegex('.js$');
var cssFilter = filterByRegex('.css$');
var fontFilter = filterByRegex('.eot$|.svg$|.ttf$|.woff$');
return gulp
.src(mainFiles)
.pipe(jsFilter)
.pipe(gulp.dest(config.jsDir))
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe(gulp.dest(config.cssDir))
.pipe(cssFilter.restore())
.pipe(fontFilter)
.pipe(gulp.dest(config.fontsDir));
});
// Utility Functions
var filterByRegex = function(regex){
return filter(function(file){
return file.path.match(new RegExp(regex));
});
};
Dependencies run always parallel: ['clean', 'bowerdeps', 'dev'].
https://github.com/gulpjs/gulp/blob/master/docs/recipes/running-tasks-in-series.md
You can use run-sequence for sequencing tasks.
Other thing: del doesn't return a stream. Use callback instead:
gulp.task('clean', function(cb) {
del([
config.cssDir,
config.fontsDir,
config.jsDir,
config.deployDir
], cb);
});