We Keep Coding

Where does this "_.startsWith" come from?

I am trying to understand the following code from the browserify-css repo:
var gulp = require('gulp');
var gutil = require('gulp-util');
var path = require('path');
var browserify = require('browserify');
var sourceStream = require('vinyl-source-stream');
var fse = require('fs-extra');
var bundleStream = browserify()
.add('src/index.js')
.transform(require('browserify-css'), {
rootDir: 'src',
processRelativeUrl: function(relativeUrl) {
var stripQueryStringAndHashFromPath = function(url) {
return url.split('?')[0].split('#')[0];
};
var rootDir = path.resolve(process.cwd(), 'src');
var relativePath = stripQueryStringAndHashFromPath(relativeUrl);
var queryStringAndHash = relativeUrl.substring(relativePath.length);
//
// Copying files from '../node_modules/bootstrap/' to 'dist/vendor/bootstrap/'
//
var prefix = '../node_modules/';
if (_.startsWith(relativePath, prefix)) {
var vendorPath = 'vendor/' + relativePath.substring(prefix.length);
var source = path.join(rootDir, relativePath);
var target = path.join(rootDir, vendorPath);
gutil.log('Copying file from ' + JSON.stringify(source) + ' to ' + JSON.stringify(target));
fse.copySync(source, target);
// Returns a new path string with original query string and hash fragments
return vendorPath + queryStringAndHash;
}
return relativeUrl;
}
})
.bundle();
bundleStream
.pipe(sourceStream(bundleFile))
.pipe(gulp.dest(browserifyConfig.dest));
I don't understand the part
_.startsWith(relativePath, prefix)
Where is the underscore coming from? It's supposed to be javascript executed by a task runner. I've found that in the NodeJS REPL the underscore character outputs the result of the last executed expression, but that functionality can't be used inside scripts. It's also not an underscore.js instance because it is not being declared anywhere. startsWith is a String method.
So what am I missing?

That code is using the lodash library. You can see in this section of the readme that they're importing lodash with var _ = require('lodash');

Set a different destination folder structure than the source folder

I'm running a gulp task to minify and move JS files.
var js_modules = 'application/modules/**/assets/js/*.js';
var js_dist_modules = 'assets/js/modules/';
gulp.task('dev_scripts', function() {
return gulp.src(js_modules)
.pipe(plumber())
.pipe(uglify())
.pipe(gulp.dest(js_dist_modules));
});
With this task the output is:
Source:
application/modules/users/assets/js/users.js
application/modules/menu/assets/js/menu.js
Destination:
assets/js/modules/users/assets/js/users.js
assets/js/modules/menu/assets/js/menu.js
And I want the destinations to be:
assets/js/modules/users/users.js
assets/js/modules/menu/menu.js
How do I achiev that?

I used gulp-rename:
var rename = require('gulp-rename');
var js_modules = 'application/modules/**/assets/js/*.js';
var js_dist_modules = 'assets/js/modules/';
gulp.task('dev_scripts', function() {
return gulp.src(js_modules)
.pipe(plumber())
.pipe(uglify())
.pipe(rename(function(file) {
file.dirname = js_dist_modules + file.basename;
}))
.pipe(gulp.dest(.));
});

Using gulp-flatten it appears something like this may work (untested):
var flatten= require('gulp-flatten);
var js_modules = 'application/modules/**/assets/js/*.js';
var js_dist_modules = 'assets/js/modules/';
gulp.task('dev_scripts', function() {
return gulp.src(js_modules)
.pipe(plumber())
.pipe(uglify())
.pipe(flatten({ subPath: [2, 1] } ))
.pipe(gulp.dest(js_dist_modules));
});
You could play with the subPath numbers to get the third (2) or whichever subDirectory you want.
This answer is more general than the previous using rename in case your desired directories - in your case the glob ** - are not the same as files' basenames.

Why gulp-watch doesn't delete files

I'm trying to make my gulp-watch task to delete files from /dest directory when I delete them from /src, but it doesn't work.
Where is the mistake?
var watch = require('gulp-watch');
var imagemin = require('gulp-imagemin');
var del = require('del');
var pngquant = require('gulp-pngquant');
var imgSrc = 'src/img/**';
var imgDst = 'build/img';
gulp.task('del', function() {
return del('build');
});
gulp.task('img', function() {
return gulp.src(imgSrc)
.pipe(debug({title: 'src'}))
//.pipe(newer(imgDst))
.pipe(imagemin())
.pipe(debug({title: 'imagemin'}))
.pipe(gulp.dest(imgDst))
.pipe(debug({title: 'dest'}));
});
gulp.task('watch', function () {
var watcher = gulp.watch(imgSrc, ['img']);
watcher.on('change', function (event) {
if (event.type === 'deleted') {
var filePathFromSrc = path.relative(path.resolve(imgSrc), event.path);
var destFilePath = path.resolve(imgDst, filePathFromSrc);
del.sync(destFilePath);
}
});
});

Your destFilePath points to a file that doesn't exist. If you delete a file src/img/foo.png your destFilePath variable ends up pointing to build/foo.png instead of build/img/foo.png (which is where your img task has put it).
The reason is that you're applying path.relative() to imgSrc which contains **. However path.relative() doesn't unterstands globs. It just interprets ** as a regular directory name. So you end up being one directory off.
You need to leave out the ** when you use path.relative():
if (event.type === 'deleted') {
var filePathFromSrc = path.relative(path.resolve('src/img'), event.path);
var destFilePath = path.resolve(imgDst, filePathFromSrc);
del.sync(destFilePath);
}

Detect what file change with gulp

I have this gulpfile:
var gulp = require('gulp'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify');
gulp.task('minifyJS', function() {
return gulp.src(['src/*.js'])
.pipe(uglify())
.pipe(gulp.dest('min'));
});
gulp.task('watch', function() {
gulp.watch(['src/*.js'], ['minifyJS']);
});
I want to know what file trigger the watcher and his absolute path.
For example: if my project is placed in /myCode and I change the file src/main.js, I want to see /myCode/src/main.js inside minifyJS task. Is there a way to do it?
Thank you for your time.

You can do it by using gulp-ng-annotate and gulp-changed:
var gulp = require('gulp');
var changed = require('gulp-changed');
var rename = require('gulp-rename');
var ngAnnotate = require('gulp-ng-annotate'); // just as an example
var SRC = 'src/*.js';
var DEST = 'src/';
//Function to get the path from the file name
function createPath(file) {
var stringArray = file.split('/');
var path = '';
var name = stringArray[1].split('.');
stringArray = name[0].split(/(?=[A-Z])/);
if (stringArray.length>1) {stringArray.pop()};
return {folder: stringArray[0], name: name[0]}
}
gulp.task('default', function () {
return gulp.src(SRC)
.pipe(changed(DEST))
// ngAnnotate will only get the files that
// changed since the last time it was run
.pipe(ngAnnotate())
.pipe(rename(function (path) {
var createdPath = createPath(path);
path.dirname = createdPath.folder;
path.basename: createdPath.name,
path.prefix: "",
path.suffix: "",
path.extname: ".min.js"
}))
.pipe(gulp.dest(DEST));
});
Result:

Use gulp-changed npm package.
$ npm install --save-dev gulp-changed
Try the below in gulp file, (I haven't tried)
var gulp = require('gulp'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
changed = require('gulp-changed');
gulp.task('minifyJS', function() {
return gulp.src(['src/*.js'])
.pipe(changed('min'))
.pipe(uglify())
.pipe(gulp.dest('min'));
});
gulp.task('watch', function() {
gulp.watch(['src/*.js'], ['minifyJS']);
});
see the documentation of this package https://www.npmjs.com/package/gulp-changed

Based on your comment to Julien's answer this should be fairly close to what you want, or at least get you going in the right direction:
var gulp = require('gulp'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
cache = require('gulp-cached'),
rename = require('gulp-rename'),
path = require('path');
function fileName(file) {
return file.dirname + path.sep + file.basename + file.extname;
}
gulp.task('minifyJS', function() {
return gulp.src(['src/*.js'])
.pipe(cache('minifyJS'))
.pipe(rename(function(file) {
var nameOfChangedFile = fileName(file);
if (nameOfChangedFile == './main.js') {
file.basename = 'main.min'
}
if (nameOfChangedFile == './userView.js') {
file.basename = 'user/userView.min'
}
console.log(nameOfChangedFile + ' -> ' + fileName(file));
}))
.pipe(uglify())
.pipe(gulp.dest('min'));
});
gulp.task('watch', function() {
gulp.watch(['src/*.js'], ['minifyJS']);
});
This uses gulp-cached to keep an in-memory cache of all the files in your src/ folder that have passed through the stream. Only files that have changed since the last invocation of minifyJS are passed down to the gulp-rename plugin.
The gulp-rename plugin itself is then used to alter the destination path of the changed files.
Note: the cache is empty on first run, since no files have passed through the gulp-cached plugin yet. This means that the first time you change a file all files in src/ will be written to the destination folder. On subsequent changes only the changed files will be written.

Gulp, using current filename in `pipe()` function

I'm trying to render each file in my gulp source files with it's own json file, but I can't figure out how to access the current filename in the pipe function.
var gulp = require('gulp');
var handlebars = require('handlebars');
var gulpHandlebars = require('gulp-compile-handlebars');
gulp.task('compile-with-sample-data', function () {
var options = {}
return gulp.src('./src/**/*.html')
.pipe(gulpHandlebars({ data: require('./data/' + filename +'.json') }, options))
.pipe(gulp.dest('./build/'));
});
Where I can get it to work with the same file each time by just using require('./data/orders-complete.json'):
var gulp = require('gulp');
var handlebars = require('handlebars');
var gulpHandlebars = require('gulp-compile-handlebars');
gulp.task('compile-with-sample-data', function () {
var options = {}
return gulp.src('./src/**/*.html')
.pipe(gulpHandlebars({ data: require('./data/orders-complete.json') }, options))
.pipe(gulp.dest('./build/'));
});
It's not clear how I would do this.

Use gulp-tap, it enables you to get the file name and even change it for downstream pipes.