Changing files in place with gulp - javascript

I have a gulp task that looks like this:
gulp.task('htmlServer', ['bower'], function(cb) {
return gulp.src(config.build.htmlServerFiles, {base: './'})
.pipe(gulp.dest(config.build.build));
});
It just moves some files around. The bower task makes some changes to these files in place.
gulp.task('bower', ['jadeServer'], function() {
gulp.src(path.join(config.build.basepath, 'public/index.html'))
.pipe(wiredep({
directory: path.join(config.build.basepath, 'public/bower_components/'),
bowerJson: require(path.join(config.build.basepath, './bower.json'))
}))
.pipe(gulp.dest(path.join(config.build.basepath, 'public')));
});
Unfortunately, the htmlServer task seems to move a version of the files that existed prior to the changes made by the bower task.
What am I doing wrong? Can I not change files in place?

Your 'bower' task must return its built pipe, otherwise it cannot signal when it's done and so the tasks are run in parallel.
See second example in https://github.com/gulpjs/gulp/blob/master/docs/recipes/running-tasks-in-series.md
var gulp = require('gulp');
var del = require('del'); // rm -rf
gulp.task('clean', function() {
return del(['output']);
});
gulp.task('templates', ['clean'], function() {
var stream = gulp.src(['src/templates/*.hbs'])
// do some concatenation, minification, etc.
.pipe(gulp.dest('output/templates/'));
return stream; // return the stream as the completion hint
});

Related

Gulp 4.0: gulp-remember or gulp-cache prevent sass to compile properly (Incremental build)

yesterday I've upgraded my Gulp to 4.0 in order to gain some speed while compiling styles for my project (they got big, right now on my Mac Pro 2016 I need to wait 19seconds)
After some digging I decided to add gulp-cached and gulp-remember to my build.
Here's my current gulpfile.js for the styles:
var gulp = require('gulp'),
sass = require('gulp-sass'),
cached = require('gulp-cached'),
sourcemaps = require('gulp-sourcemaps'),
autoprefixer = require('gulp-autoprefixer'),
remember = require('gulp-remember'),
gs = gulp.series,
concat = require('gulp-concat'),
gp = gulp.parallel;
gulp.task('compile:styles', () => {
return gulp.src([
// Grab your custom scripts
'./assets/scss/**/*.scss'
])
.pipe(sourcemaps.init()) // Start Sourcemaps
.pipe(cached('sass'))
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 2 versions']
}))
.pipe(remember('sass'))
.pipe(sourcemaps.write('.')) // Creates sourcemaps for minified styles
.pipe(gulp.dest('./assets/css/'));
});
gulp.task('watch:styles', () => {
gulp.watch('./assets/scss/**/*.scss', gs('styles'))
.on('change', function (event) {
console.log("event happened:"+JSON.stringify(event));
if (event.type === 'deleted') {
//delete from gulp-remember cache
remember.forget('sass', event.path);
//delete from gulp-cached cache
delete cache.caches['sass'][event.path];
}
});
});
gulp.task('watch', gp(
'watch:styles'
));
My issue here is that my build works well on first compilation which takes about 3 seconds, later on where ever I do a change it can see in which file I made that change, and it starting to compile, but the output file does not have the changes inside.
I think I am not getting something when it comes to gulp-cached and gulp-remeber. But at the end of the file you can see a function that are supposed to clean the caches once a change was made.
Can you please take a look at my code? Maybe you will have some advice.
Cheers!
### EDIT 26.08
I have encountered the following post while looking for a solution:
http://blog.reactandbethankful.com/posts/2015/05/01/building-with-gulp-4-part-4-incremental-builds/
I went with it accordingly with the following code (but the effect is same as in above example):
// Grab our gulp packages
var gulp = require('gulp'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
autoprefixer = require('gulp-autoprefixer'),
gs = gulp.series,
gp = gulp.parallel,
cache = require('gulp-memory-cache');
gulp.task('compile:styles', () => {
return gulp.src('./assets/scss/**/*.scss', {since: cache.lastMtime('sass')})
.pipe(sourcemaps.init()) // Start Sourcemaps
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 2 versions']
}))
.pipe(cache('sass'))
.pipe(sourcemaps.write('.')) // Creates sourcemaps for minified styles
.pipe(gulp.dest('./assets/css/'));
});
gulp.task('watch:styles', () => {
gulp.watch('./assets/scss/**/*.scss', gs('compile:styles'))
.on('change', cache.update('sass'));
});
gulp.task('build', gs(
'compile:styles',
'watch:styles'
));
I have created a complete gulpfile.js here:
https://gist.github.com/MkBeeCtrl/5a6a0900dba1c5d42dc7b6da211b3e95
With js files compilation included.
// Grab our gulp packages
var gulp = require('gulp'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
autoprefixer = require('gulp-autoprefixer'),
gs = gulp.series,
gp = gulp.parallel,
cached = require('gulp-cached'),
dependents = require('gulp-dependents');
gulp.task('compile:styles', () => {
return gulp.src('./assets/scss/**/*.scss')
.pipe(cached('sass'))
.pipe(dependents())
.pipe(sourcemaps.init()) // Start Sourcemaps
.pipe(sass())
.pipe(autoprefixer({browsers: ['last 2 versions']}))
.pipe(sourcemaps.write('.')) // Creates sourcemaps for minified styles
.pipe(gulp.dest('./assets/css/'));
});
gulp.task('watch:styles', () => {
gulp.watch('./assets/scss/**/*.scss', gs('compile:styles'))
.on('change', function (event) {
console.log("event happened:"+JSON.stringify(event));
if (event.type === 'deleted') {
//delete from gulp-remember cache
//emember.forget('sass', event.path);
//delete from gulp-cached cache
delete cache.caches['sass'][event.path];
}
});
});
gulp.task('build', gs(
'compile:styles',
'watch:styles'
));
The above solution works the way I want, so if you want to produce separate CSS files from multiple imported files, you can go with it. It's not blazing fast solution but I have managed to save about 1 second when recompiling (already saved about 15s, when I started this topic, a build lasted 19 secs):
1st compile: ~3.5s
2nd or late: ~2.4s
You dont need to concate or order here as the whole order thing happens when you import scss files into you main file.
Try this one. I suppose it might do what you want to achieve:
'use strict';
const gulp = require('gulp');
const path = require('path');
const cached = require('gulp-cached');
const remember = require('gulp-remember');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const sourcemaps = require('gulp-sourcemaps');
const concat = require('gulp-concat');
gulp.task('styles:compile', function() {
return gulp.src('assets/scss/**/*.scss', {since: gulp.lastrun('styles:compile')})
.pipe(sourcemaps.init())
//.pipe(cached('sass')) - a smarter but heavier alternative to since
.pipe(remember('sass'))
.pipe(concat('all.sass'))
.pipe(sass())
.pipe(autoprefixer({ browsers: ['last 2 versions'] }))
.pipe(sourcemaps.write())
.pipe(gulp.dest('assets/css/'));
});
gulp.task('styles:watch', function() {
var watcher = gulp.watch('assets/scss/**/*.scss', gulp.series('compile:styles'));
watcher.on('unlink', function(filepath) {
remember.forget('sass', path.resolve(filepath));
//delete cached.caches.sass[path.resolve(filepath)];
});
});
gulp.task('default', gulp.series('styles:compile', 'styles:watch'));
Install path plugin to resolve paths. Use 'unlink' event if you want to detect when a file gets deleted. since just checks dates which is faster compared to cached that reads and compares content. But cached is more reliable (for example, when you deleted and then returned the file using your IDE tools since will not work since the file will be returned again with its old date). Also check paths - I might have messed them up.

Running Gulp task one after another in specific order

I need to run one gulp task that contains 3 or 4 another tasks. The problem is (steps):
In task #1 I need download file from remote server
After download completed, I need to run task #2
And when task #2 is done I need to run task #3
This is my code:
var gulp = require('gulp'),
decompress = require('gulp-decompress'),
download = require("gulp-download"),
ftp = require('gulp-ftp'),
gutil = require('gulp-util');
gulp.task('default', function(){
console.log("Hello gulp");
});
var src_download = [
"https://wordpress.org/latest.zip"
];
gulp.task('download', function(){
download(src_download)
.pipe(gulp.dest("./"));
});
gulp.task('unzip-wp', function(){
return gulp.src('latest.zip')
.pipe(decompress({strip: 1}))
.pipe(gulp.dest('./'));
});
gulp.task('install', ['download', 'unzip-wp']);
As you can see, when I am trying to run 'install' task - it will run 'unzip-wp' before 'download' has been completed...
What am I doing wrong?
I need to run 'unzip-wp' task only after 'download' task has been completed.
Thanks
You should have the 'unzip-wp' task wait for the 'download' task to finish. To make sure the 'download' task is really finished also add a return statement to that task, i.e. this would do what you're looking for:
var gulp = require('gulp'),
decompress = require('gulp-decompress'),
download = require("gulp-download"),
ftp = require('gulp-ftp'),
gutil = require('gulp-util');
gulp.task('default', function () {
console.log("Hello gulp");
});
var src_download = [
"https://wordpress.org/latest.zip"
];
gulp.task('download', function () {
return download(src_download)
.pipe(gulp.dest("./"));
});
gulp.task('unzip-wp', ['download'], function () {
return gulp.src('latest.zip')
.pipe(decompress({strip: 1}))
.pipe(gulp.dest('./'));
});
gulp.task('install', ['unzip-wp']);
Very simple there is no need of unzip task it will also unzip into wordpress folder for the sake that it will not mess your other files.
gulp.task('download', function(){
download(src_download)
.pipe(decompress({strip: 1}))
.pipe(gulp.dest('./wordpress'));
});
gulp.task('default', ['download']);

Gulp Not Watching

So consider the following gulp file:
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var babelify = require("babelify");
var watch = require('gulp-watch');
gulp.task('make:engine', function() {
return browserify({entries: [
'./src/index.js'
]})
.transform("babelify")
.bundle()
.pipe(source('engine.js'))
.pipe(gulp.dest('dist/'));
});
gulp.task('make:example', function() {
return browserify({entries: [
'./examples/index.js'
]})
.transform("babelify")
.bundle()
.pipe(source('compiled-example.js'))
.pipe(gulp.dest('dist/example/'));
});
gulp.task('watch', ['make:engine', 'make:example'], function(){
return watch('*.js', ['make:engine', 'make:example']);
});
gulp watch spits out:
[15:06:01] Using gulpfile ~/Documents/ice-cream-engine/gulpfile.js
[15:06:01] Starting 'make:engine'...
[15:06:01] Starting 'make:example'...
[15:06:03] Finished 'make:example' after 1.57 s
[15:06:03] Finished 'make:engine' after 1.6 s
[15:06:03] Starting 'watch'...
In ANY js file, if I make an edit and save the file, the terminal doesn't update to say that it is making the engine or the examples.
The project directory looks as follows:
What am I doing wrong such that it wont actually re-compile on ANY JS file change?
According to your screenshot, the only .js file that matches the glob you have passed to watch is gulpfile.js.
If you want to watch all .js files under the src and example directories, you could use the following:
gulp.task('watch', ['make:engine', 'make:example'], function(){
return watch(['src/**/*.js', 'examples/**/*.js'], ['make:engine', 'make:example']);
});

Using gulp.watch throws "TypeError: Object #<Object> has no method 'watch'"

So I've added a watch task to my gulpfile.js that looks like this:
gulp.task('watch', function(){
gulp.watch('src/style/*.less', ['css']);
});
but when I run it (gulp watch) I get the following error thrown in my face:
PS C:\Projects\web\basic> gulp watch
[21:28:42] Using gulpfile C:\Projects\web\basic\gulpfile.js
[21:28:42] Starting 'watch'...
[21:28:42] 'watch' errored after 226 μs
[21:28:42] TypeError: Object #<Object> has no method 'watch'
at Gulp.watch (C:\Projects\web\basic\node_modules\gulp\index.js:40:14)
at Gulp.<anonymous> (C:\Projects\web\basic\gulpfile.js:37:7)
at module.exports (C:\Projects\web\basic\node_modules\gulp\node_modules\orchestrator\lib\runTask.js:34:7)
at Gulp.Orchestrator._runTask (C:\Projects\web\basic\node_modules\gulp\node_modules\orchestrator\index.js:273:3)
at Gulp.Orchestrator._runStep (C:\Projects\web\basic\node_modules\gulp\node_modules\orchestrator\index.js:214:10)
at Gulp.Orchestrator.start (C:\Projects\web\basic\node_modules\gulp\node_modules\orchestrator\index.js:134:8)
at C:\Users\Magnus\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:129:20
at process._tickCallback (node.js:415:13)
at Function.Module.runMain (module.js:499:11)
at startup (node.js:119:16)
As I've come to understand watch is a built-in function in gulp so what am I doing wrong here? The only other solutions to this dilemma I've seen is Linux specific (and presumable so is the cause for the problem). It is described in this SO-thread, but I'm using Windows and I can't see how that problem could be showing up in a Windows environment.
Also, I've looked through the Gulp index.js-file for project installation and it does contain a watch prototype, but the problems seems (according to the error message) to come from the final line in the watch function:
Gulp.prototype.watch = function(glob, opt, fn) {
if (typeof opt === 'function' || Array.isArray(opt)) {
fn = opt;
opt = null;
}
// Array of tasks given
if (Array.isArray(fn)) {
return vfs.watch(glob, opt, function() {
this.start.apply(this, fn);
}.bind(this));
}
return vfs.watch(glob, opt, fn);
};
It's the return vfs.watch(glob, opt, fn);-line that causes the crash (it's line 40). vfs in this case is a variable that contains vinyl-fs and looks like this:
var vfs = require('vinyl-fs');
But even after manually installing it both in my project and globally it still doesn't work. Anyone that has any idea what might be causing this crash?
EDIT: The full gulpfile.js:
var gulp = require('gulp'),
less = require('gulp-less'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify');
var cssPath = 'src/style/*.less';
var jsPath = 'src/js/*.js';
var htmlPath = 'src/index.htm';
var assetPath = 'src/assets/*';
gulp.task('css', function() {
return gulp.src(cssPath) //Get all less files from src/style/
.pipe(less()) //Pass them on to less
.pipe(concat('style.css')) //Concat all files to one big style.css-file
.pipe(gulp.dest('dist/style')) //Pass the less result to gulp so it can be moved to dist/css
});
gulp.task('js', function(){
return gulp.src(jsPath) //Get all the javascript files from src/js/
.pipe(uglify()) //Pass them on to uglify
.pipe(concat('all.js')) //Concat all the files into one javascript file
.pipe(gulp.dest('dist/js')) //Pass the result to gulp so it can be moved to dist/js
});
gulp.task('html', function(){
return gulp.src(htmlPath)
.pipe(gulp.dest('dist'))
});
gulp.task('assets', function(){
return gulp.src(assetPath)
.pipe(gulp.dest('dist/assets'))
});
gulp.task('watch', function(){
gulp.watch(cssPath, ['css']);
gulp.watch(jsPath, ['js']);
gulp.watch(htmlPath, ['html']);
gulp.watch(assetPath, ['assets']);
});
gulp.task('default', ['css', 'js', 'html', 'assets']);
Thanks to #ezrepotein and #entre for helping me out.
The solution was simply to reinstall node and then uninstall and reinstall all gulp components in the project.
After that it worked out well so something must've gone wrong during installation of either node or the gulp components.

Iterating over directories with Gulp?

I'm new to gulp, but I'm wondering if its possible to iterate through directories in a gulp task.
Here's what I mean, I know a lot of the tutorials / demos show processing a bunch of JavaScript files using something like "**/*.js" and then they compile it into a single JavaScript file. But I want to iterate over a set of directories, and compile each directory into it's own JS file.
For instance, I have a file structure like:
/js/feature1/something.js
/js/feature1/else.js
/js/feature1/foo/bar.js
/js/feature1/foo/bar2.js
/js/feature2/another-thing.js
/js/feature2/yet-again.js
...And I want two files: /js/feature1/feature1.min.js and /js/feature2/feature2.min.js where the first contains the first 4 files and the second contains the last 2 files.
Is this possible, or am I going to have to manually add those directories to a manifest? It would be really nice to pragmatically iterate over all the directories within /js/.
Thanks for any help you can give me.
-Nate
Edit: It should be noted that I don't only have 2 directories, but I have many (maybe 10-20) so I don't really want to write a task for each directory. I want to handle each directory the same way: get all of the JS inside of it (and any sub-directories) and compile it down to a feature-based minified JS file.
There's an official recipe for this: Generating a file per folder
var fs = require('fs');
var path = require('path');
var merge = require('merge-stream');
var gulp = require('gulp');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var scriptsPath = 'src/scripts';
function getFolders(dir) {
return fs.readdirSync(dir)
.filter(function(file) {
return fs.statSync(path.join(dir, file)).isDirectory();
});
}
gulp.task('scripts', function() {
var folders = getFolders(scriptsPath);
var tasks = folders.map(function(folder) {
return gulp.src(path.join(scriptsPath, folder, '/**/*.js'))
// concat into foldername.js
.pipe(concat(folder + '.js'))
// write to output
.pipe(gulp.dest(scriptsPath))
// minify
.pipe(uglify())
// rename to folder.min.js
.pipe(rename(folder + '.min.js'))
// write to output again
.pipe(gulp.dest(scriptsPath));
});
// process all remaining files in scriptsPath root into main.js and main.min.js files
var root = gulp.src(path.join(scriptsPath, '/*.js'))
.pipe(concat('main.js'))
.pipe(gulp.dest(scriptsPath))
.pipe(uglify())
.pipe(rename('main.min.js'))
.pipe(gulp.dest(scriptsPath));
return merge(tasks, root);
});
You could use glob to get a list of directories and iterate over them, using gulp.src to create a separate pipeline for each feature. You can then return a promise which is resolved when all of your streams have ended.
var fs = require('fs');
var Q = require('q');
var gulp = require('gulp');
var glob = require('glob');
gulp.task('minify-features', function() {
var promises = [];
glob.sync('/js/features/*').forEach(function(filePath) {
if (fs.statSync(filePath).isDirectory()) {
var defer = Q.defer();
var pipeline = gulp.src(filePath + '/**/*.js')
.pipe(uglify())
.pipe(concat(path.basename(filePath) + '.min.js'))
.pipe(gulp.dest(filePath));
pipeline.on('end', function() {
defer.resolve();
});
promises.push(defer.promise);
}
});
return Q.all(promises);
});
I am trying myself to get how streams work in node.
I made a simple example for you, on how to make a stream to filter folders and start a new given stream for them.
'use strict';
var gulp = require('gulp'),
es = require('event-stream'),
log = require('consologger');
// make a simple 'stream' that prints the path of whatever file it gets into
var printFileNames = function(){
return es.map(function(data, cb){
log.data(data.path);
cb(null, data);
});
};
// make a stream that identifies if the given 'file' is a directory, and if so
// it pipelines it with the stream given
var forEachFolder = function(stream){
return es.map(function(data, cb){
if(data.isDirectory()){
var pathToPass = data.path+'/*.*'; // change it to *.js if you want only js files for example
log.info('Piping files found in '+pathToPass);
if(stream !== undefined){
gulp.src([pathToPass])
.pipe(stream());
}
}
cb(null, data);
});
};
// let's make a dummy task to test our streams
gulp.task('dummy', function(){
// load some folder with some subfolders inside
gulp.src('js/*')
.pipe(forEachFolder(printFileNames));
// we should see all the file paths printed in the terminal
});
So in your case, you can make a stream with whatever you want to make with the files in a folder ( like minify them and concatenate them ) and then pass an instance of this stream to the forEachFolder stream I made. Like I do with the printFileNames custom stream.
Give it a try and let me know if it works for you.
First, install gulp-concat & gulp-uglify.
$ npm install gulp-concat
$ npm install gulp-uglify
Next, do something like:
//task for building feature1
gulp.task('minify-feature1', function() {
return gulp.src('/js/feature1/*')
.pipe(uglify()) //minify feature1 stuff
.pipe(concat('feature1.min.js')) //concat into single file
.pipe(gulp.dest('/js/feature1')); //output to dir
});
//task for building feature2
gulp.task('minify-feature2', function() { //do the same for feature2
return gulp.src('/js/feature2/*')
.pipe(uglify())
.pipe(concat('feature2.min.js'))
.pipe(gulp.dest('/js/feature2'));
});
//generic task for minifying features
gulp.task('minify-features', ['minify-feature1', 'minify-feature2']);
Now, all you have to do to minify everything from the CLI is:
$ gulp minify-features
I had trouble with the gulp recipe, perhaps because I'm using gulp 4 and/or because I did not want to merge all my folders' output anyway.
I adapted the recipe to generate (but not run) an anonymous function per folder and return the array of functions to enable them to be processed by gulp.parallel - in a way where the number of functions I would generate would be variable. The keys to this approach are:
Each generated function needs to be a function or composition (not a stream). In my case, each generated function was a series composition because I do lots of things when building each module folder.
The array of functions needs to passed into my build task using javascript apply() since every member of the array needs to be turned into an argument to gulp.parallel in my case.
Excerpts from my function that generates the array of functions:
function getModuleFunctions() {
//Get list of folders as per recipe above - in my case an array named modules
//For each module return a function or composition (gulp.series in this case).
return modules.map(function (m) {
var moduleDest = env.folder + 'modules/' + m;
return gulp.series(
//Illustrative functions... all must return a stream or call callback but you can have as many functions or compositions (gulp.series or gulp.parallel) as desired
function () {
return gulp.src('modules/' + m + '/img/*', { buffer: false })
.pipe(gulp.dest(moduleDest + '/img'));
},
function (done) {
console.log('In my function');
done();
}
);
});
}
//Illustrative build task, running two named tasks then processing all modules generated above in parallel as dynamic arguments to gulp.parallel, the gulp 4 way
gulp.task('build', gulp.series('clean', 'test', gulp.parallel.apply(gulp.parallel, getModuleFunctions())));
`

Categories

Resources