Gulp - Target all files in a folder and its subfolders - javascript

I'd like to be able to add a watch task in gulp to all of the js files in the frontend/js and any other js files below
gulp.watch('./frontend/js/**/*.js', ['browserify']);
This will only target js files one folder deep

It's supposed to match any number of subdirectories:
** If a "globstar" is alone in a path portion, then it matches zero or more directories and subdirectories searching for matches. It does not crawl symlinked directories.
https://github.com/isaacs/node-glob
Do you have symlinked directories in there?
Symlinks
I don't think you'll get gulp to natively traverse your symlinked directories. I recommend you take a look at node.js fs.readdir recursive directory search and see if any of those solutions can be applied to your use case. Nothing in the question or answers specifically addresses symlinks, so I don't know if there's a solution for you there or not. If you can get an array of dereferenced pathnames using one of those solutions, then you can just pass the array to gulp.src().

I just did some testing - and this actually works just fine for me.
I currently have the following structure -
--apps
--scripts
----test.js
----test-folder
------test2.js
------test-folder-deep
--------test3.js
--myApp
----scripts-symlinked (symlinked to apps/scripts)
----gulpfile.js
I set up my symlink folder (on Mac - from 'myApp' folder) using:
ln -s /Users/kandrews/apps/scripts ./scripts-symlinked
In my gulpfile.js I have the following:
var gulp = require('gulp'),
jshint = require('gulp-jshint');
gulp.task('jshint', function () {
gulp.src('./scripts-symlinked/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
gulp.task('watch', function () {
gulp.watch('./scripts-symlinked/**/*.js', ['jshint']);
});
Works perfectly. I also tried this in a sub directory as well ('scripts/symlinked-scripts') and was successful as well.

I think it’s not worth doing difficult:
gulp.watch('./frontend/js/', ['browserify']);

Related

Grunt: have package.json and Gruntfile.js on different folders

Im having problems trying to implement grunt on diferent folders, in my root i have:
<root>/package.json
<root>/node_modules
And inside another folder, my gruntfile with diferent subfolders and files wich i work:
<root>/apps/static/Gruntfile.js
If i go to root and execute
grunt --gruntfile /apps/static/Gruntfile.js MyTaskName
I get:
Local Npm module "grunt-contrib-concat" not found. Is it installed?
Local Npm module "grunt-contrib-cssmin" not found. Is it installed?
Local Npm module "grunt-contrib-clean" not found. Is it installed?
Local Npm module "grunt-contrib-watch" not found. Is it installed?
Local Npm module "grunt-contrib-uglify" not found. Is it installed?
And i run several times npm install.
On my gruntfile.js y have
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
I triple check and folders are ok (in fact, originally gruntfile and package where in the same folder and everything was working perfect, run several task and everything is ok). I really need to have a common package.json and node_modules on root and the Gruntfile.js on a specific project folder
Any idea whats going on? thanks in advance
Grunt makes certain assumptions regarding the location of gruntfile.js.
When you specify the location of gruntfile.js using the --gruntfile option, Grunt sets the current directory to the directory containing the specified file:
// Change working directory so that all paths are relative to the
// Gruntfile's location (or the --base option, if specified).
process.chdir(grunt.option('base') || path.dirname(gruntfile));
And when Grunt loads NPM tasks, it does so relative to the current directory:
var root = path.resolve('node_modules');
var pkgfile = path.join(root, name, 'package.json');
There is a --base option with which the current directory can be specifed, but whether or not that will solve your problem (without introducing other problems) I do not know. The simplest solution is likely to locate gruntfile.js where it wants and expects to be located.
Sometimes, it may be the need of project to have Gruntfile.js in a different folder than package.json.
I had a very similar use-case where there were multiple submodules each with its own build process, one of them was Grunt. But at the same time I wanted to have a common package.json just to avoid multiple node_modules folders being created, so that common dependencies (including transitive) use to install once. It helped in reducing install time as well as disk usage.
I was expecting a solution in Grunt itself. But as #cartant mentioned, Grunt has made certain assumptions.
So, here is what I did:
In Gruntfile.js,
Define a function:
function loadExternalNpmTasks(grunt, name) {
const tasksdir = path.join(root, 'node_modules', name, 'tasks');
if (grunt.file.exists(tasksdir)) {
grunt.loadTasks(tasksdir);
} else {
grunt.log.error('Npm module "' + name + '" not found. Is it installed?');
}
}
And instead of
grunt.loadNpmTasks('grunt-contrib-concat');
do:
loadExternalNpmTasks(grunt, 'grunt-contrib-concat');
Reference: https://github.com/gruntjs/grunt/blob/master/lib/grunt/task.js#L396

1 gulp file build multiple projects

I am building a series of plugins for WP, and want to use gulp to manage the assets.
I have created a strict naming/directory pattern in each of the plugins, in order to make using the task management easier. Currently all the plugins sit in the basic WP structure, and my gulp file sits below root and runs fine.
I am now extracting all the plugins into composer packages. I now want to build the plugins, and leave all the assets in the plugin directories rather than dumping them to the theme. I have now put the "builder" into its own package, which I can run from my IDE.
e.g.
pluginOne
pluginTwo
pluginBuilder
I have so far created this to find the scss files build the style:
How can I tell gulp to pipe back to the directory it found? I've only managed to get it to pipe to specific dir
gulp.task('style', function() {
glob('../plugins/pluginprefix-*/assets/build/scss/pluginprefix.*.scss', {}, function (er, files) {
gulp.src(files)
.pipe(plugins.plumber())
.pipe(plugins.sass())
.pipe(plugins.autoprefixer('last 10 version'))
.pipe(plugins.minifyCss())
.pipe(gulp.dest(''));
})
});
Thanks for any help or advice =)
This should work:
var rename = require('gulp-rename');
...
.pipe(rename(function(path){
path.dirname = path.dirname;
path.basename = path.basename;
});
.pipe(gulp.dest(''));

How to set up wiredep with gulp and jade

I am trying to inject bower files into my jade/html using wiredep. The issue is twofold.
If I were to keep the bower_component in the root folder. Being that my server is set up from ./dist and not from root, I am unable to reach bower_compoents
If I were to install bower-components in my ./dist folder(which makes sense, as of now), and create a unique filepath for bower_components, my bower.json(it needs this to pick up proper filepath also), then it adds the extra filepath ./dist to my bower_components. However, being that my server is in ./dist, I need to remove ./dist from my filepath.
I will be answering this one for option #2. I just want to put it out there for others who want to do the same or something similar.
In the future I do want to keep bower_components in my root in order to compile them all into one js file. For now this works, as it is mostly for prototyping reasons. However, definitely interested in finding a way to make #1 work.
I set up a branch in the github here for those interested in seeing the file structure and the full gulpfile.js
What I ended up doing is installing all of the bower_components in my dist folder. I also put my bower.json there.
For the wiredep and jade magic I added the following to my gulpfile.js:
gulp.task('templates', function() {
var YOUR_LOCALS = {};
gulp.src('./app/jade/*.jade')
.pipe(jade({
locals: YOUR_LOCALS,
pretty: true
}))
.pipe(wiredep({
directory: './dist/bower_components',
bowerJson: require('./dist/bower.json'),
ignorePath: '/dist'
}))
.pipe(gulp.dest('./dist'))
});
The magic happens in one real place and that is the ignorePath option for wiredep. I am able to have the directory from the dist folder. However, being that the filepath includes ./dist, and I can't have that being that my server works from ./dist, I was able to ignore ./dist and it outputted the proper file path.
Another note, in order to includes, let's say javascript files in bower for jade, use the following syntax
// bower:js
// endbower
That's it and if this only helped one person there, it was worth it. If you have any questions feel free to leave a comment.

How to compile multiple typescript files into one javascript file with Gulp?

I have multiple typescript files I want to compile into one single javascript file. I have the following code so far:
var typescript = require('gulp-typescript');
gulp.task('typescript', function () {
gulp.src('wwwroot/app/**/*.ts')
.pipe(typescript({
out: 'script.js'
}))
.pipe(sourcemaps.init())
.pipe(sourcemaps.write())
.pipe(gulp.dest('wwwroot/app'))
});
I have searched online on how this is done but couldn't seem to find anything useful. I read that the 'out' option would concatenate and produce output to a single file. Can anyone point me to the right direction? So far the code I have would only create one javascript for every typescript file I have.
Davin is right.
From the gulp-typescript docs:
"Concatenate files
The tsc command has the ability to concatenate using the --out parameter. gulp-typescript doesn't have that, because you should use the gulp-concat plugin for that, or - if you want sourcemaps - gulp-concat-sourcemaps.
The tsc command sorts the files using the tags. gulp-typescript does this when you enable the sortOutput option. You can use the referencedFrom filter to only include files that are referenced from certain files."

concat underscore templates in a directory to a single js file and load it for use with a backbone app

I'd like to combine all the underscore templates in a directory to a single js file ( possibly precompile it ? ) for use with the backbonejs part of my sails.js app.
I think I can use the plain fs module with nodejs to read the files and combine them, I'm looking at grunt to do this as well but still not sure.
Can someone help me with this ?
You can use grunt to do this. The plugin grunt-contrib-jst is what you're looking for; it has installation and usage documents here.
A simple Gruntfile.js like this should do it. (This example assumes all your source code is under a src/ subdirectory, all templates are in *.html files under src/, and you're creating an output file in the build/ subdirectory. Adjust as needed to fit your actual situation.) Run by typing grunt on the command line.
Just include the single file build/view-templates.js in your index file to load all of your Underscore view templates.
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-jst');
grunt.initConfig({
// compile view templates into single file
jst: {
compile: {
files: {
"build/view-templates.js": ["src/**/*.html"]
}
}
}
});
grunt.registerTask('default', 'jst' );
};

Categories