sogko / gulp-recipes

gulp-recipes

gulp-recipes

Notes:

Updates as of 20 March 2016: I have originally created this so that the Gulp community would be able help each other to find solutions to common use-cases. I have since moved away from Gulp to Webpack for most of my work, and have not been actively participating in Gulp's latest activities (I'm not knocking on Gulp, it is still a useful tool. Webpack just works well for my case).

Some (most? or all?) of the recipes in this repo has not been updated for a while, and may not work as expected. But I do hope that those in the Gulp community still help each other grow, and I'd be very happy to accept PRs for any existing or new recipes. Or even a new maintainer =)

---

Not your typical collection of gulp recipes for your streaming build.

Rather than having a big 'ol gulpfile.js with a ton of gulp.task(),

• each recipe is a standalone folder,
• with its own gulpfile.js and minimal set of gulp.task(),
• healthy pinch of comments,
• comes along with real examples that you can gulp to see it in action,
• a big serving of README.md included!

Simply cd to a recipe folder, gulp and slurp away.

Motivations

• Enough with the plugins wrapping over an existing library, created just for convenient's sake.
• Vanilla node modules over wrappers.
• If an existing library can be vinyled, tapped, plumbered, transformed from/to buffers and/or streams, let there be a recipe for it.
• A lot of recipe snippets laying around the web; most are working off the bat. Some needs a little bit more pizzazz. And pizzas.

Recipes

• browser-sync-nodemon-expressjs
  How to use browser-sync + gulp-nodemon to serve an ExpressJS app for live-reloaded development.

• browserify-vanilla
  How to use vanilla browserify and stop using gulp-browserify.

• browserify-separating-app-and-vendor-bundles
  How to use vanilla browserify (and its friends) to separate codebase into multiple bundles for better build times.

• unnecessary-wrapper-gulp-plugins
  A list of gulp-y recipes for unnecessary wrapper gulp-* plugins

Quick Start

Pre-requisites

npm install -g gulp

Install

git clone https://github.com/sogko/gulp-recipes
cd gulp-recipes
[sudo] npm install # some modules require sudo to install on some machines

Running a recipe example

For eg: browser-sync-nodemon-expressjs

cd browser-sync-nodemon-expressjs
gulp

Other recipe collections / recipes

• A collection of recipes maintained by gulpjs
• A couple of excellent recipes in CoffeeScript maintained by Kagami

Contribution

All are most welcome! Pull requests, issues, contributors and snacks, bring 'em to the party!

Credits

You

License

MIT

gulp-recipes's Issues

Expose a module in a file to a module in another file

Hello,

I follow your trick to separate vendor script and my own script.
However, I've got a big problem. I browserify a lot of files linked to my app. However these scripts needs jquery and other vendors.
Browserify exposes the modules inside a same file but not the modules in the vendor.js file.
Do you know how to fix it ?

Regards,

problem with lodash and restangular

I have restangular in dependencies.
When i try to separate vendor and app, i have this error :
Error: [$injector:modulerr] Failed to instantiate module restangular due to:
ReferenceError: _ is not defined

How shim lodash in external package?

Want to add gulp-protractor to unnecessary-wrapper-gulp-plugins?

Do you want to add https://github.com/mllrsohn/gulp-protractor to the unnecessary-wrapper-gulp-plugins?

Here is code which could be used instead of the plugin: https://github.com/mllrsohn/gulp-protractor#running-protractor-without-a-plugin

I could create a PR if you like.

browserify-vanilla example does not work

Hello
Using these modules versions the given example does not work.

$ node -v
v0.12.2

$ npm -v
2.12.1

gulp": "^3.9.0",
"browserify": "^10.2.4",
"vinyl-transform": "^1.0.0"

gulp browserify
[16:43:03] Using gulpfile ~/Documents/workspace/test/gulpfile.js
[16:43:03] Starting 'browserify'...
_stream_readable.js:540
    var ret = dest.write(chunk);
                   ^
TypeError: undefined is not a function
    at Producer.ondata (_stream_readable.js:540:20)
    at Producer.emit (events.js:107:17)
    at Producer.Readable.read (_stream_readable.js:373:10)
    at flow (_stream_readable.js:750:26)
    at resume_ (_stream_readable.js:730:3)
    at _stream_readable.js:717:7
    at process._tickCallback (node.js:355:11) 

Express not hot reloading on change to app.js

Browser not reloading when saving app.js???

'use strict';

require('dotenv').config;
const gulp = require('gulp');
const browserSync = require('browser-sync');
const nodemon = require('gulp-nodemon');
const sassify = require('gulp-sass');
const prefix = require('gulp-autoprefixer');
const minify = require('gulp-minify-css');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
const util = require('gulp-util');
const rename = require('gulp-rename');

// we'd need a slight delay to reload browsers
// connected to browser-sync after restarting nodemon
let BROWSER_SYNC_RELOAD_DELAY = 1000;
let DEV_MODE = process.env.DEV_MODE

gulp.task('nodemon', function (cb) {
    let called = false;
    return nodemon({

        // nodemon our expressjs server
        script: 'app.js',

        // watch core server file(s) that require server restart on change
        watch: ['app.js']
    })
        .on('start', function onStart() {
            // ensure start only got called once
            if (!called) { cb(); }
            called = true;
        })
        .on('restart', function onRestart() {
            // reload connected browsers after a slight delay
            setTimeout(function reload() {
                browserSync.reload({
                    stream: false
                });
            }, BROWSER_SYNC_RELOAD_DELAY);
        });
});

gulp.task('browser-sync', ['nodemon'], function () {

    // for more browser-sync config options: http://www.browsersync.io/docs/options/
    browserSync.init({

        // informs browser-sync to proxy our expressjs app which would run at the following location
        proxy: 'http://localhost:8000',

        // informs browser-sync to use the following port for the proxied app
        port: 8080,
    });
});

// gulp.task('js', function () {
//     return gulp.src('public/**/*.js')
//     // do stuff to JavaScript files
//     //.pipe(uglify())
//     //.pipe(gulp.dest('...'));
// });

gulp.task('sass', function () {
    return gulp.src('public/sass/**/*.sass')
        .pipe(sassify())
        .pipe(prefix('last 10 version'))
        .pipe(DEV_MODE ? minify() : util.noop())
        .pipe(rename(function (path) { path.extname = '.min.css'; }))
        .pipe(gulp.dest('public/css'))
        .pipe(browserSync.reload({ stream: true }))
});

gulp.task('vendor-css', function () {
    return gulp.src('vendor/css/**/*.css')
        .pipe(minify())
        .pipe(concat('vendor.min.css'))
        .pipe(gulp.dest('public/css'))
        .pipe(browserSync.reload({ stream: true }))
});

// gulp.task('css', function () {
//     return gulp.src('public/css/**/*.css')
//         .pipe(browserSync.reload({ stream: true }));
// })

gulp.task('bs-reload', function () {
    browserSync.reload();
});


gulp.task('default', ['vendor-css', 'sass', 'browser-sync'], function () {
    //gulp.watch('public/**/*.js', ['js', browserSync.reload]);
    gulp.watch('vendor/css/**/*.css', ['vendor-css']);
    gulp.watch('public/sass/**/*.sass', ['sass']);
    gulp.watch('app/views/**/*.pug', ['bs-reload']);
});

splitting app into 2 bundles: how to deal with global variable dependencies

Hi,

Thanks for this nice recipe: exactly what I needed.

My current build is:

"use strict";

var browserify   = require('browserify');
var gulp         = require('gulp');
var gutil        = require('gulp-util');
var handleErrors = require('../util/handleErrors');
var source       = require('vinyl-source-stream');
var watchify     = require("watchify");
var livereload   = require('gulp-livereload');
var gulpif       = require("gulp-if");


var buffer       = require('vinyl-buffer');
var uglify       = require('gulp-uglify');


var libs = [
    "ajax-interceptor",
    //"atom-react",
    "autolinker",
    "bounded-cache",
    "fuse.js",
    "highlight.js",
    "html-truncate",
    "htmlsave",
    "imagesloaded",
    "iscroll",
    "jquery",
    "keymaster",
    "lodash",
    "medium-editor",
    "mime-db",
    "mime-types",
    "moment",
    //"offline-js",
    "packery",
    "q",
    "rangy",
    "react",
    "react-date-picker",
    "spin.js",
    "steady",
    "store",
    "string",
    //"tether-tooltip",
    "uuid",
    "react-dnd"
];


// permits to create a special bundle for vendor libs
// See https://github.com/sogko/gulp-recipes/tree/master/browserify-separating-app-and-vendor-bundles
gulp.task('browserify-libs', function () {
    var b = browserify({
        debug: true
    });

    libs.forEach(function(lib) {
        b.require(lib);
    });

    return b.bundle()
        .on('error', handleErrors)
        .pipe(source('appLibs.js'))
        // TODO use node_env instead of "global.buildNoWatch"
        .pipe(gulpif(global.buildNoWatch, buffer()))
        .pipe(gulpif(global.buildNoWatch, uglify()))
        .pipe(gulp.dest('./build'));
});



// Inspired by http://truongtx.me/2014/08/06/using-watchify-with-gulp-for-fast-browserify-build/

gulp.task('browserify',['cleanAppJs','browserify-libs'],function browserifyShare(){
    var b = browserify({
        cache: {},
        packageCache: {},
        fullPaths: true,
        extensions: ['.jsx'],
        paths: ['./node_modules','./src/'],
        debug: true
    });
    b.transform('reactify');

    libs.forEach(function(lib) {
        b.external(lib);
    });

    // TODO use node_env instead of "global.buildNoWatch"
    if ( !global.buildNoWatch ) {
        b = watchify(b);
        b.on('update', function() {
            gutil.log("Watchify detected change -> Rebuilding bundle");
            return bundleShare(b);
        });
    }
    b.on('error', handleErrors);

    //b.add('app.js'); // It seems to produce weird behaviors when both using "add" and "require"

    // expose does not seem to work well... see https://github.com/substack/node-browserify/issues/850
    b.require('app.js',{expose: 'app'});

    return bundleShare(b);
});



function bundleShare(b) {
    return b.bundle()
        .on('error', handleErrors)
        .pipe(source('app.js'))
        .pipe(gulp.dest('./build'))
        // TODO use node_env instead of "global.buildNoWatch"
        .pipe(gulpif(!global.buildNoWatch, livereload()));
}

It works fine, however I'm in trouble with some libraries like tether-tooltip and offline-js which are using a window global variable and node using NPM module.exports

Do you know if it is possible to add global variable dependencies to the vendor bundle? It would be a nice addition to your recipe

Gulp Browserify + Reactify (JSX)

Would be incredibly useful to see an extension of your browserify vanilla example that included a JSX transform (reactify).

Something along the lines of this gulp-browserify based sample:

gulp.task('javascripts', function() {
  gulp.src('src/javascripts/app.jsx')
    .pipe(browserify({
      insertGlobals: true,
      transform: ['reactify'],
      extensions: ['.jsx']
    }))
    .pipe(gulp.dest('build/javascripts'));
});

gulp-nodemon watch doesn't work

this is the code from the recipe:

return nodemon({
    script: './bin/www',
    env: { 'NODE_ENV': 'development' },
    watch: ['./app.js']
})

might be the fact that my script file is './bin/www'?
tried various options like '../app.js', '/app.js', dirname + '/app.js'
no luck though...
any idea? thanks

How to use vanilla browserify with watchify

Your browserify-vanilla (browserify + vinyl-transform) recipe works great. But how can I use it with watchify?

I found a Gist - but after a change, each bundle is recompiled.

https://github.com/gulpjs/gulp/blob/master/docs/recipes/fast-browserify-builds-with-watchify.md doesn't support multiple bundles.

Thanks for your help!

/cc @substack, @indieisaconcept