We Keep Coding

Gulp seems to be working, but build files have not been processed

My Problem
I've been using gulp as a task runner for this project that I'm working on - which is a simple website. I have a src directory where I do all of my coding, store all of my assets like scripts, images, icons etc.
Up until now, gulp has been doing things like auto-prefixing and minifying my CSS files, it's been compressing my images, minifying JavaScript, and my HTML. It then sends everything to a build directory, and that's what I upload to the server. Everything has been working until today.
The issues is that gulp seems to be working: It runs fine in the terminal, it builds a "build" directory and all my projects files and assets are there. However none of the processing seems to take place.
What I've Tried
deleting the build directory and running gulp again: Gulp creates a new build and everything seems to work, but none of the files have been processed.
npm uninstall and then, npm install: I thought maybe there was a possiblilty that a fresh install of all my dependancies would fix the problem - but no.
google: obviously I've tried finding solutions. Problem is I haven't found a question related to my problem (my appologies if there is one).
It seems to me my problem really stems from the fact that Gulp slilently fails. I'm not getting any errors at all but it's obvious something is wrong.
My Environment btw...
I'm running on Windows 10. There is no server running, or any continous integration, or browser refreshing, or any other automated tasks what so ever. I'm simply writing code in one directory, and Gulp is processing that code and assets, and outputing it to a build directory.
The plugins I'm using are:
gulp-autoprefixer
gulp-htmlmin
gulp-clean-css
gulp-uglify
gulp-imagemin
gulp-remove-html-comments
The only package manager I'm using is npm no bower or anything else.
The actual question
So if it's not clear... why is gulp building my project but not outputting the correct files? Or, are the files right, but somehow the processing is being skipped?
Thanks so much in advance!
As for any other information, I'd be happy to share what ever is needed. But there are no errors, so there is no log to share. Here's the gulpfile.js
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var htmlmin = require('gulp-htmlmin');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var removeHtmlComments = require('gulp-remove-html-comments');
gulp.task('imagemin', function() {
return gulp.src(['src/**/**/*', '!src/images/**/*.db'])
.pipe(imagemin())
.pipe(gulp.dest('build/'));
});
gulp.task('minify-js', function() {
return gulp.src(['src/**/*.js'])
.pipe(uglify())
.pipe(gulp.dest('build/'));
});
gulp.task('minify-html', function() {
return gulp.src('src/**/*.html')
.pipe(removeHtmlComments())
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('build/'))
});
gulp.task('prefix', function () {
return gulp.src('./src/**/*.css')
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest('build/'));
});
gulp.task('default', ['prefix', 'minify-html', 'minify-js', 'imagemin'], function() {
gulp.watch(['src/css/*.css'], ['prefix']);
gulp.watch(['src/**/*.html'], ['minify-html']);
gulp.watch(['src/**/*js'], ['minify-js']);
gulp.watch(['src/images/**/*'], ['imagemin']);
});

So I ended up discovering the problem myself.
At first my gulp tasks seemed to start working again for no apparent reason. I was puzzled as to why and after wasting an hour investigating with no luck I just moved forward with development.
Until today I've just put up with the fact that sometimes the build would work and sometimes not.
The issue is in the imagemin task.src/**/**/* should be src/images/**/*. Silly mistake on my part, but hopefully this helps someone else who has a similar issue - if ever.
The reason the build would sometimes work and sometimes not, was that sometimes the imagemin task would finish it's work first, and then the other tasks would run fine. If imagemin finished last however, the task undid all previous processing since it was running on all files in src.

Gulp with browserify: Cannot find start module

I have pretty much the exact same problem as described in Gulp with browserify: Cannot find module src/js/main.js: I have a JavaScript project that I can build using browserify from the command line, but not in gulp. But the solution for that question does not work for me.
From the command line:
browserify -t reactify ./js/inspector > static/js/inspector.js
works perfectly. When I run the following gulp task:
gulp.task('browserify', function() {
return browserify({
transform: ['reactify'],
entries: ['./js/inspector.js']
})
.bundle()
.pipe(source('inspector.js'))
.pipe(gulp.dest('./static/js/'));
});
and run it, I get the following error in the console:
Error: Cannot find module '../../inspector'
and also the generated file has the same length as the CLI file but not the same order of modules. Which puzzles me.
I have the same version of browserify in my global and local modules, and I've not knowingly configured it, anywhere.
Unlike Ben Davis, who asked the other question, adding a ./ to the start of my path changes nothing.
I don't understand why browserify gives a different, and broken, output, when run through gulp.
Update: The directory structure of the project:
gulpfile.js
node_modules/
js/ (also contains subdirectories with JS code)
inspector.js
static/
js/
inspector.js (built)
Update: When I run Browserify through Grunt, I also get a different file, but it works.

You can try wrapping your return function in an IIFC.
//======================================
// Task: browserify
//======================================
gulp.task('browserify', function() {
return (function() {
browserify(config.src)
.bundle()
.pipe(source(config.name))
.pipe(gulp.dest(config.dest));
})();
});
I am using the above successfully in a current proj.

I had other modules that required the root module, à la:
var inspector = require('../../inspector');
This is what caused the problem (somehow). Putting in a root module that was never required by anything else made gulp + browserify work without any problems.
I'll see if I can create a minimal reproduction project for the gulp / browserify maintainers.

GruntJS setup: No targets found

The code
My latest commit is in a repo on GitHub.
The problem...
I am setting up a project (link above) using GruntJS. While trying to run any Grunt task, I'm getting a No "<insert-taskname>" targets found; a few examples:
No "browserSync" targets found.
Warning: Task "browserSync" failed. Use --force to continue.
No "jshint" targets found.
Warning: Task "jshint" failed. Use --force to continue.
No "sass" targets found.
Warning: Task "sass" failed. Use --force to continue.
What I'm doing
I am using external .js Grunt config files using the load-grunt-configs plugin. I have used a very similar setup in other projects without problems. I'm passing the shared Grunt variables which were initialized in the Gruntfile.js to each of the grunt-configs files using the options object that is a part of the load-grunt-configs plugin.
What I've tried so far...
I've tried checking my Grunt variables that are being used in the external config files, double checking my syntax and bracket matching, and searching through other stack overflow questions with no luck.
Any help would be greatly appreciated! Thank you.

I recommend using the idiomatic and built-in methods of breaking up your Gruntfile instead. 3rd party solutions tend to stray far from the Grunt APIs.
Create a folder named tasks/ and within that folder add files similar to what you're currently doing now.
Load all of those files in your main Gruntfile using grunt.loadTasks():
// Gruntfile.js
module.exports = function(grunt) {
// Initialize config.
grunt.initConfig({
pkg: require('./package.json'),
});
// Load per-task config from separate files.
grunt.loadTasks('tasks');
};
Each of those files are formatted like mini Gruntfiles. Here is an example for jshint:
// tasks/jshint.js
module.exports = function(grunt) {
grunt.config('jshint', {
app: {
options: {jshintrc: 'app/.jshintrc'},
src: ['app/**/*.js'],
},
});
grunt.loadNpmTasks('grunt-contrib-jshint');
};
Here is a full example of this solution from the creator of Grunt himself: https://github.com/cowboy/wesbos

your problem is inside your config tasks.
you are doing
module.exports = {
you need to do:
module.exports.tasks = {
other than that i recommend following kyle's answer, as it is much cleaner to use grunt's built in features!

How to write unit tests for a grunt plugin that doesn't write files?

I'm creating a grunt plugin which is responsible for finding URLs in a file and adding those URLs to a variable in the grunt file using
grunt.config.set('urls', urls);
All examples of unit test for Grunt plugins assume that the plugin is going to write a file and then compares that output to a test file with the 'expected' result.
Is there any way to test if my Grunt plugin has set a config variable?

Something like this?
urlConfigTest: function(test) {
test.expect(1);
grunt.config.set('urls','http://foo.example.com');
test.equal(grunt.config.get('urls'), 'http://foo.example.com', 'Should set foo to the grunt configuration.');
test.done();
}

The Yo generator (*) for grunt-plugins basically is basically setting up tests like this:
Setup your Gruntconfig.js to run your plugin with a specific testconfig
Then configure a testrun by creating a test task: grunt.registerTask('test', ['myPlugin', 'nodeunit']);. This means that your plugin should have set the config values you like to test against.
Run the test like test.equal(grunt.config.get('urls'), 'http://foo.example.com', 'Should ...');
The Yo generator is maintained by Addy Osmani and Stephen Sawchuck, which might be counted as credible sources ;-)
(*) npm install -g generator-gruntplugin

Node.js browserify slow: isn't there a way to cache big libraries?

I'm creating a file that requires huge libraries such as jquery and three.js using browserify. The compiling process takes several seconds, probably because it's recompiling all the libs for each minor change I make. Is there a way to speed it up?

Have you tried using the --insert-globals, --ig, or --fast flags? (they're all the same thing)
The reason it's slow may be that it's scanning all of jquery and d3 for __dirname, __filename, process, and global references.
EDIT:
I just remembered: Browserify will take any pre-existing require functions and fall back to using that. more info here
This means you could build a bundle for your static libs, and then only rebuild the bundle for your app code on change.
This coupled with my pre-edit answer should make it a lot faster.

There are a few options that can help:
--noparse=FILE is a must for things like jQuery and three.js that are huge but don't use require at all.
--detect-globals Set to false if your module doesn't use any node.js globals. Directs browserify not to parse a file looking for process, global, __filename, and __dirname.
--insert-globals Set to true if your module does use node.js globals. This will define those globals without parsing the module and checking to see if they're used.
I was able to speed up my build by externalizing ThreeJS, using noparse with it, and setting it not to create a source map for it.
Use https://github.com/substack/watchify while developing.

If you use grunt, you can use my grunt task : https://github.com/amiorin/grunt-watchify
It caches the dependencies and watches the filesystem. Because of this the build is very fast. You can use it with grunt-contrib-watch and grunt-contrib-connect or alone. You can find a Gruntfile.js example in the github repository.
If you don't use grunt, you can use the original watchify from #substack : https://github.com/substack/watchify

Using watchify is practically a must, as it actually caches your deps between reloads.
My builds dropped from 3-8s to under 1s. (The >3s builds were still using ignoreGlobals, detectGlobals=false, and even noParseing jQuery).
Here's how I use it with gulp and coffeescript:
gutil = require("gulp-util")
source = require("vinyl-source-stream")
watchify = require("watchify")
browserify = require("browserify")
coffeeify = require("coffeeify")
gulp.task "watchify", ->
args = watchify.args
args.extensions = ['.coffee']
bundler = watchify(browserify("./coffee/app.coffee", args), args)
bundler.transform(coffeeify)
rebundle = ->
gutil.log gutil.colors.green 'rebundling...'
bundler.bundle()
# log errors if they happen
.on "error", gutil.log.bind(gutil, "Browserify Error")
# I'm not really sure what this line is all about?
.pipe source("app.js")
.pipe gulp.dest("js")
.pipe livereload()
gutil.log gutil.colors.green 'rebundled.'
bundler.on "update", rebundle
rebundle()
gulp.task "default", ["watchify", "serve"]
EDIT: here's a JS translation:
var gutil = require("gulp-util")
var source = require("vinyl-source-stream")
var watchify = require("watchify")
var browserify = require("browserify")
var coffeeify = require("coffeeify")
gulp.task("watchify", function() {
var args = watchify.args
args.extensions = ['.coffee']
var bundler = watchify(browserify("./coffee/app.coffee", args), args)
bundler.transform(coffeeify)
function rebundle() {
gutil.log(gutil.colors.green('rebundling...'))
bundler.bundle()
// log errors if they happen
.on("error", gutil.log.bind(gutil, "Browserify Error"))
// I'm not really sure what this line is all about?
.pipe(source("app.js"))
.pipe(gulp.dest("js"))
.pipe(livereload())
gutil.log(gutil.colors.green('rebundled.'))
}
bundler.on("update", rebundle)
rebundle()
})
gulp.task("default", ["watchify", "serve"])

Update
You can also give it a try to persistify which can be used as a drop in replacement for watchify from the command line and from code.
Original answer below
=======
I'm currently using bundly: https://www.npmjs.com/package/bundly
FULL DISCLOUSURE: I wrote it
But the main difference of this wrapper is that it provides incremental building. It persists the browserify cache between runs and only parse the files that have changed without the need for the watch mode.
Currently the module does a bit more than only adding the cache, but I'm thinking that the logic that handles the incremental build part could be moved to a plugin, that way it can be used with browserify directly.
Check a demo here: https://github.com/royriojas/bundly-usage-demo

I wrote this to solve the problem of slow builds with browserify and commonjs-everywhere. If you run it in "watch" mode then it will automatically watch your input files and incrementally rebuild just any files that changed. Basically instantaneous and will never get slower as your project grows.
https://github.com/krisnye/browser-build