vigetlabs / blendid

A delicious blend of gulp tasks combined into a configurable asset pipeline and static site builder

Blendid is a delicious stand-alone blend of tasks and build tools poured together as a full-featured modern asset pipeline. It can be used as-is as a static site builder, or can be configured and integrated into your own development environment and site or app structure.

Heads up

The Viget team is no longer actively developing Blendid. We will continue to maintain it for existing clients, and if you're interesting in becoming a maintainer get in touch!

Quick start on a fresh project (empty directory)

yarn init
yarn add blendid
yarn run blendid init
yarn run blendid

This will create default src and config files in your directory and start compiling and live-updating files! Try editing them and watch your browser auto-update!

Documentation

Full documentation is available on the Wiki

---

Visit code.viget.com to see more projects from Viget.

blendid's Issues

Rename markup to html

I found markup to be a little bit of a tricky name for the gulp task, it took me a little bit of thinking to realise that it meant HTML markup. While I understand that markup is technically correct and encompasses other markup languages as well as HTML, IMO HTML is a better name.

At the least I would suggest a comment on the markup task to explain it. I'm happy to make a PR for either option if you like.

Is gulpfile.js intentionally left blank?

I am searching for an example for Gulp Handlebars and noticed the example gulpfile.js is essentially a blank canvas.

Include a `dist` gulp task

That would:

• minify the browserified JS
• minify the CSS
• update the index.html file with the appropriate file names

Use the `paths` option of browserify to avoid relative paths hell

Based on your project, I've build some starter app structure (that I'll publish soon), to create Phonegap/Cordova apps using Gulp / Browserify / React...

What really bothered me with your project was the fact that in our app, the browserify components we create could not be required using module style but only relative paths.

This leads to things like `require("./../../../../MyModule") which is a real pain when we refactor, move files and need our brain to think about how much nesting we need or things like that...

One solution to this problem is to use the paths option of browserify.

In my case, I have just added some /js/ folder to this paths, because it is the folder in which I put all js files I develop:

    return browserify({
        entries: ['./src/js/app.js'],
        extensions: ['.jsx'],
        paths: ['./node_modules','./src/js/']
    })
        .transform('reactify')
        .bundle({debug: true})
        .on('error', handleErrors)
        .pipe(source('app.js'))
        .pipe(gulp.dest('./www'));

(for an unknown reasons, I had to put the ./node_modules or it wouldn't work, I opened some bug for that)

This way, instead of doing require("./../../common/MyUtil") or require("./../../../../../common/MyUtil") based on where I am currently in the path, I can simply do require("common/MyUtil") everywhere in my code.

Another option is that the build file can find all subdirectories of the /js/ directory and then add them all to the path, like shown here: https://gist.github.com/sbrekken/05937e81927802452f48

This way one can simply use require("MyUtil")
(maybe in this case it would worth trying to see how browserify handle naming conflicts in case your own filename already matches an existing npm module)

Use Watchify v0.8.1 to prevent issue in Gulp process

Recent versions of Watchify are not handling errors properly, and will cause Gulp process to stop updating your page.

This happened to me on Coffeescript compilation errors, but other transforms have been noted.

Issue is open at browserify/watchify/issues/64. May want to leave this open until fixed. Reverting back to Watchify v0.8.1 works for now.

Compass source maps not found

SASS source maps work fine with my own files, but I get a 404 errors in the console for all the Compass imported SASS sheets.

For example:
http://localhost:3000/sass/usr/local/var/rbenv/versions/2.1.2/lib/ruby/gems….1.0/gems/compass-core-1.0.0.rc.1/stylesheets/compass/css3/_transform.scss

Which obviously can't be found. This is the default project, what's going wrong here?

`gulp build` does not exit after tasks complete

Do you see this behavior?

Unclear instructions?

"To add a new task, simply add a new task file to gulp/tasks."

Just adding a file.js to gulp/tasks doesn't mean that it'll automatically run. You still have to add it to gulp.task('default', ['your','stuff']);

Build path error for windows users

the following split will not work on windows machine
var buildPath = __dirname.split('/gulp/tasks')[0];

Sub-folders in tasks directory?

Any thoughts on adding a sub-folders in the tasks directory, in my case we had to do exactly that because the task files number went up and there was no structure.

So i globbed the filepaths and looped through those.

Let me know what you guys think.

-David

Support task dependencies

This is slick:

var gulp = require('gulp');

module.exports = function(tasks) {
    tasks.forEach(function(name) {
        gulp.task(name, require('./tasks/' + name));
    });

    return gulp;
};

But doesn't allow for each task to define an array of dependency tasks.

If you defined the gulp tasks within their respective modules, they could then define their own dependencies. In this case, you'd only require the modules in your forEach():

var gulp = require('gulp');
var fs = require('fs');

module.exports = function () {

    var tasks = fs.readdirSync('./gulp/tasks/');

    tasks.forEach(function (file) {
        require('./tasks/' + file);
    });

    return gulp;
};

And in each module: (open.js for example)

var gulp = require('gulp');
var open = require("gulp-open");

gulp.task('open', ['dependency1', 'dependency2'], function() {

    var options = {
        url: "http://localhost:8080",
        app: "google chrome"
    };

    return gulp.src("./index.html").pipe(open("", options));
};

Can't seem to get started on Windows 8

I went through all the instructions mentioned here:
https://github.com/greypants/gulp-starter

But no dice.

$ gulp
[12:23:04] Warning: gulp version mismatch:
[12:23:04] Global gulp is 3.8.6
[12:23:04] Local gulp is 3.6.2
[12:23:05] Using gulpfile c:\xampp\htdocs\demos\gulp-starter-master\gulpfile.js
[12:23:05] Starting 'setWatch'...
[12:23:05] Finished 'setWatch' after 37 μs
[12:23:05] Starting 'browserify'...
[12:23:05] Running 'bundle'...
[12:23:05] Starting 'compass'...
[12:23:05] Starting 'images'...
[12:23:05] Starting 'copy'...

events.js:72
throw er; // Unhandled 'error' event
^
Error: spawn Unknown system errno 193
at errnoException (child_process.js:1000:11)
at Process.ChildProcess._handle.onexit (child_process.js:791:34)

Native JavaScript source maps

Here are two tests.

1. The first test a console.log("waht") is executed in app.controller.js. What I notice is a link instead to the concatenated Browserify'd file app.js.
2. I am forcing an undefined error, right underneath this console.log("waht") also in app.controller.js. Also being linked to app.js

Am I wrong to expect these should both link to app.controller.js?

On a side note, I was thinking about giving https://github.com/thlorenz/exorcist a try.

How would I integrate that into the Browserify solution that exists now?

package.json browser: underscore wrong path?

That path looks wrong to me
https://github.com/greypants/gulp-starter/blob/master/package.json#L10

  "browser": {
    "underscore": "backbone/node_modules/underscore",

JSHint before any task

Hi,
I would like to add JsHint and stop everything if it's broken. I'm trying something like this

var gulp   = require('gulp');
var config = require('../config');

gulp.task('watch', ['setWatch', 'browserSync'], function() {
    gulp.watch([config.paths.app],[
        'lint',
        'browserify'
    ]);
    gulp.watch(config.paths.markup, ['markup']);
});

but this doesn't work. Could you help me please?

As a project dependency too

Just an idea I had. Instead of starting from your project, I would start by making a new project, then I would run npm install gulp-starter. This will install it in my node_modules. And now I could simply use the gulp task from your gulp-starter in node_modules in my gulpfile.js.

My gulpfile.js could look like this:

// Get the default config and tweak it with my own options
// This way, I only need to define a few options
var config = extendDeep(require('node_modules/gulp-starter/gulp/config'), {
  browserSync.port: 8081,
  images.dest: "img",
  globals: {
    debug: false,
  }
});

// Set up "default", "build" and "clean" tasks:
require('node_modules/gulp-starter/gulp/tasks/base');

// Now only load the tasks we need
require('node_modules/gulp-starter/gulp/tasks/watch');
require('node_modules/gulp-starter/gulp/tasks/jshint-early');
require('node_modules/gulp-starter/gulp/tasks/browserify');
require('node_modules/gulp-starter/gulp/tasks/jshint-full');
require('node_modules/gulp-starter/gulp/tasks/browserSync');
require('node_modules/gulp-starter/gulp/tasks/sass');
//require('node_modules/gulp-starter/gulp/tasks/images');  // <- Temporarily disabled

A few benefits:

• updates to gulp-starter can be applied easily by updating the module
• no need to update my own code
• I get all the best gulp tasks from the community
• I can simply enable or disable a task. Tasks define themselves their own dependencies

It could use something like this: https://github.com/3rd-Eden/canihaz or like that https://github.com/unfold/gulpfile-install or https://www.npmjs.com/package/install-requires to prevent having a lot of unused dependencies (nobody uses sass, less and stylus at the same time).

Bower dependencies?

I was curious as to how you handle bower dependencies, or do you stick strictly with npm and browserify? There are some packages that aren't available through npm though, so I was wondering, out of all the options (wiredep, main-bower-files) which one is preferred to bundle your bower dependencies.

Support browserify plugins

See #92 for details.

Browserify + Karma

I'd love to see this starter integrated with Karma, but I can't see how it could be done nicely.
There is a Karma preprocessor called karma-bro that could help (it will be renamed soon, see nikku/karma-browserify#37). Ideally karma-bro could load the bundle configurations from config.js, but I'm not sure if that would work as karma-bro seems to accept a limited number of options.

Thoughts?

error "npm WARN unmet dependency" after "npm install"

First use and dabbing in node and gulp, so perhaps i'm doing something wrong.

As instructed by the readme.md i ran

sudo npm install

and got this result:

barry@crunchbang-barry:~/gitclones/gulp-starter$ sudo npm install
npm WARN unmet dependency /home/barry/gitclones/gulp-starter/node_modules/browser-sync/node_modules/cl-strings requires lodash@'~2.4.1' but will load
npm WARN unmet dependency undefined,
npm WARN unmet dependency which is version undefined
npm WARN unmet dependency /home/barry/gitclones/gulp-starter/node_modules/browser-sync/node_modules/opt-merger requires lodash@'^2.4.1' but will load
npm WARN unmet dependency undefined,
npm WARN unmet dependency which is version undefined
npm WARN unmet dependency /home/barry/gitclones/gulp-starter/node_modules/browser-sync/node_modules/glob-watcher/node_modules/gaze/node_modules/globule requires lodash@'~1.0.1' but will load
npm WARN unmet dependency undefined,
npm WARN unmet dependency which is version undefined
npm WARN unmet dependency /home/barry/gitclones/gulp-starter/node_modules/browser-sync/node_modules/localtunnel/node_modules/request/node_modules/form-data requires mime@'~1.2.2' but will load
npm WARN unmet dependency undefined,
npm WARN unmet dependency which is version undefined
npm WARN unmet dependency /home/barry/gitclones/gulp-starter/node_modules/browser-sync/node_modules/socket.io/node_modules/engine.io/node_modules/ws requires commander@'~0.6.1' but will load
npm WARN unmet dependency /home/barry/gitclones/gulp-starter/node_modules/browser-sync/node_modules/commander,
npm WARN unmet dependency which is version 2.3.0
npm WARN unmet dependency /home/barry/gitclones/gulp-starter/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-gifsicle/node_modules/gifsicle/node_modules/bin-build/node_modules/download/node_modules/decompress/node_modules/tar/node_modules/block-stream requires inherits@'~2.0.0' but will load
npm WARN unmet dependency undefined,
npm WARN unmet dependency which is version undefined
npm WARN unmet dependency /home/barry/gitclones/gulp-starter/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-gifsicle/node_modules/gifsicle/node_modules/bin-build/node_modules/download/node_modules/decompress/node_modules/tar/node_modules/fstream requires inherits@'~2.0.0' but will load
npm WARN unmet dependency undefined,
npm WARN unmet dependency which is version undefined
npm WARN unmet dependency /home/barry/gitclones/gulp-starter/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-gifsicle/node_modules/gifsicle/node_modules/bin-build/node_modules/download/node_modules/decompress/node_modules/tar/node_modules/fstream requires mkdirp@'0.5' but will load
npm WARN unmet dependency /home/barry/gitclones/gulp-starter/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-gifsicle/node_modules/gifsicle/node_modules/bin-build/node_modules/download/node_modules/mkdirp,
npm WARN unmet dependency which is version 0.3.5
npm WARN unmet dependency /home/barry/gitclones/gulp-starter/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-gifsicle/node_modules/gifsicle/node_modules/bin-wrapper/node_modules/download requires nopt@'^2.2.0' but will load
npm WARN unmet dependency /home/barry/gitclones/gulp-starter/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/nopt,
npm WARN unmet dependency which is version 3.0.1
npm WARN unmet dependency /home/barry/gitclones/gulp-starter/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-gifsicle/node_modules/gifsicle/node_modules/bin-wrapper/node_modules/download/node_modules/decompress requires mkdirp@'^0.3.5' but will load
npm WARN unmet dependency undefined,
npm WARN unmet dependency which is version undefined
npm WARN unmet dependency /home/barry/gitclones/gulp-starter/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-gifsicle/node_modules/gifsicle/node_modules/bin-wrapper/node_modules/download/node_modules/decompress requires nopt@'^2.2.0' but will load
npm WARN unmet dependency /home/barry/gitclones/gulp-starter/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/nopt,
npm WARN unmet dependency which is version 3.0.1
npm WARN unmet dependency /home/barry/gitclones/gulp-starter/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-jpegtran/node_modules/jpegtran-bin/node_modules/bin-build/node_modules/download/node_modules/decompress requires mkdirp@'^0.3.5' but will load
npm WARN unmet dependency undefined,
npm WARN unmet dependency which is version undefined
npm WARN unmet dependency /home/barry/gitclones/gulp-starter/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-jpegtran/node_modules/jpegtran-bin/node_modules/bin-wrapper/node_modules/download requires nopt@'^2.2.0' but will load
npm WARN unmet dependency /home/barry/gitclones/gulp-starter/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/nopt,
npm WARN unmet dependency which is version 3.0.1
npm WARN unmet dependency /home/barry/gitclones/gulp-starter/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-jpegtran/node_modules/jpegtran-bin/node_modules/bin-wrapper/node_modules/download/node_modules/decompress requires mkdirp@'^0.3.5' but will load
npm WARN unmet dependency undefined,
npm WARN unmet dependency which is version undefined
npm WARN unmet dependency /home/barry/gitclones/gulp-starter/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-jpegtran/node_modules/jpegtran-bin/node_modules/bin-wrapper/node_modules/download/node_modules/decompress requires nopt@'^2.2.0' but will load
npm WARN unmet dependency /home/barry/gitclones/gulp-starter/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/nopt,
npm WARN unmet dependency which is version 3.0.1
npm WARN unmet dependency /home/barry/gitclones/gulp-starter/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-pngquant/node_modules/pngquant-bin/node_modules/bin-wrapper/node_modules/download/node_modules/decompress requires mkdirp@'^0.3.5' but will load
npm WARN unmet dependency undefined,
npm WARN unmet dependency which is version undefined

Better error reporting during compilation/build

Gulp fails to produce the bundle but does not give details about the error that caused it to crash:
In my project it fails to create main.js bundle and this is all I see:

[14:53:52] Finished 'markup' after 6.05 s
[14:53:54] gulp-notify: [Error running notifier] Could not send message: error is not defined
[14:53:54] Bundled main.js in 8.28 s

I'm using building some CoffeeScritpt files and my config looks like this:

{
  "browser": {
    "jquery": "./bower_components/jquery/dist/jquery.js",
      ....
    "utils": "./src/javascript/utils.coffee"
  },
  "browserify": {
    "transform": [
      "browserify-shim",
      "coffeeify",
      "hbsfy",
      "jstify"
    ]
  },
  "browserify-shim": {
    "jquery": "$",
    "underscore": "_",
    "backbone": {
      "exports": "Backbone",
      "depends": [
        "jquery:$",
        "underscore:_"
      ]
    },
    "backbone.marionette": {
      "exports": "Marionette",
      "depends": [
        "backbone:Backbone"
      ]
    },
    "backbone.epoxy": {
      "exports": "Epoxy",
      "depends": [
        "backbone:Backbone"
      ]
    },
    "pusher": "Pusher"
  },
  "devDependencies": {
    "bower": "^1.3.12",
    "browser-sync": "~1.3.6",
    "browserify": "^8.0.2",
    "browserify-shim": "^3.8.2",
    "coffeeify": "~0.7.0",
    "gulp": "^3.8.7",
    "gulp-autoprefixer": "^2.0.0",
    "gulp-changed": "^0.4.1",
    "gulp-filesize": "0.0.6",
    "gulp-imagemin": "^0.6.2",
    "gulp-minify-css": "^0.3.11",
    "gulp-notify": "^1.4.2",
    "gulp-sass": "^1.1.0",
    "gulp-sourcemaps": "^1.2.8",
    "gulp-uglify": "^1.0.2",
    "gulp-util": "^3.0.0",
    "handlebars": "^1.3.0",
    "hbsfy": "~2.0.0",
    "jstify": "^0.7.0",
    "lodash": "^2.4.1",
    "node-underscorify": "0.0.13",
    "pretty-hrtime": "~0.2.1",
    "require-dir": "^0.1.0",
    "vinyl-source-stream": "~0.1.1",
    "watchify": "^2.2.1"
  },
  "dependencies": {},
  "scripts": {
    "postinstall": "node_modules/.bin/bower install"
  }
}

The gulp config fragment is listed bellow:

 browserify: {
    bundleConfigs: [{
      entries: src + '/javascript/main.js',
      dest: dest,
      outputName: 'main.js',
      // list of externally available modules to exclude from the bundle
      extensions: ['.coffee', '.hbs', ".tpl", ".tmpl"],
      external: vendors
    }, {
      entries: src + '/javascript/utils.coffee',
      dest: dest,
      outputName: 'utils.js',
      external: vendors
    }, {
      entries: src + '/javascript/locales.coffee',
      dest: dest,
      outputName: 'locales.js',
      external: vendors
    }]

p.s. I'm new to gulp and the other tools and I don't master them, so I might have made some configuration mistakes, hence the above snippets.

tsify

Hi all,
I am at a loss how I'd add a new plugin TSIFY (akin to coffee script) into this gulp starter pipeline.

Has anyone integrated typescript with this starter?

Thanks

Trying to use watchify?

Hello

http://blog.avisi.nl/2014/04/25/how-to-keep-a-fast-build-with-browserify-and-reactjs/

Maybe it could be better to use watchify

Add notes about browserSync config the markup task

Specifically around watching files when not using a markup task. Also, I need to replace the markup task with something that actually does something.

Would require-dir be a simper way to include tasks?

Firstly, really like what you have done to split out tasks, makes it much easier to manage many tasks.

Looking at the gulp docs, I came across this which may help:

https://github.com/gulpjs/gulp/blob/master/docs/recipes/split-tasks-across-multiple-files.md

I'm wondering if it'll be simpler to use that to automatically include all files in the tasks folder?

Not watching Sass files in sub-directories under src/sass/

Looks like watch.js is only watching sass files that are directly under the sass directory but not any of its subdirectories. So when I made a subdirectory under sass containing Sass partial files, they were not reloaded on save.

• https://github.com/greypants/gulp-starter/blob/d7fdb1bb6396b484ce784755ac7413954ee73f1a/gulp/tasks/watch.js#L10
• https://github.com/greypants/gulp-starter/blob/d7fdb1bb6396b484ce784755ac7413954ee73f1a/gulp/config.js#L12

I guess you're not using ** because of performance reasons, but it'd be useful if it can watch subdirectories as well.

Feedback

Hi guys,

I've used this pack two months ago and it was all about gulp and I had a really nice baseline to start, nothing to remove, just things to add that I could find myself. Now it's all crazy.

Gulp starter should be for starting a new project independent of JS frameworks and workflows.

To much stuff to remove and it's too opinionated.

BrowserSync does the refresh, why support for LiveReload too?

Handlebars
Npm backbone
Npm jquery
Underscore (included with Backbone)

Why all these? I use angular.js for some projects too, so, if that, I need to remove handlebars from the project.

I really loved the initial builds of this project, but now it looks overwhelming.

Uncaught Error: Cannot find module 'underscore'

Great starter kit, but one issue I've run into is after running gulp production with no errors, I try to run the contents of /build in browser and get Uncaught Error: Cannot find module 'underscore'.

Help?

Add html templating gulp example

"[Compile Error] Error: Cannot find module..." after watchify detect changes

Hello, I have been using this starter as a practice to switch from Grunt. I must first say thanks a lot for doing a great work.

I am having a small issue with some file paths issue. I thought I was having a 'relative paths hell' issue, so I used the browserify.paths technique, but that didn't fix it. I am not sure where the issue might be.

I'll give you an example of my entry file.

------------ Begin: app.coffee fragment ----------

window.Application = new MyApplication()
Application.on('start',(options)->
new Application.Controllers.ApplicationController();
$('.version').text(Application.apiVersion)
console.log 'API Version XXX: ' + Application.apiVersion
)
Application.apiVersion = 2

if Application.apiVersion is 1
Application.Controllers.ProductsController = require("1/controllers/ProductsController")
else if Application.apiVersion is 2
Application.Controllers.ProductsController = require("2/controllers/ProductsController")
Application.Controllers.ApplicationController = require("1/controllers/ApplicationController")

Application.start()
------------ End: app.coffee fragment ----------

------------- Begin: compile error after watchify detect changes -------------
[17:58:12] gulp-notify: [Compile Error] Error: Cannot find module '1/controllers/ProductsController' from '/Users/mykone/dev/browserify-project-demo/src'
[17:58:12] Bundled app.js in 740 ms
[17:58:12] gulp-notify: [Compile Error] Error: Cannot find module '2/controllers/ProductsController' from '/Users/mykone/dev/browserify-project-demo/src'
[17:58:12] gulp-notify: [Compile Error] Error: Cannot find module '1/controllers/ApplicationController' from '/Users/mykone/dev/browserify-project-demo/src'
------------- End: compile error after watchify detect changes -------------

What's funny is that when I run "gulp" the first time, it compiles fine and doesn't complain about cannot find module, but at runtime when a file change triggers a rebuild it then complain about cannot finding module. Not sure if the issue is in "vinyl-source-stream" or "watchify"

package.json issue on browserify update

It seems like on update the bundle process adds an unnecessary 'module.exports=' piece to the beginning of the package.json files of any dependent modules. It isn't immediately obvious to me if this is a bug in the browserify.js gulp task, browserify or watchify, but I believe it lies in one of those three things.

You can easily reproduce this issue by adding something like require('bitcore') to the index.js file, running gulp and then triggering an update by modifying a file.

Cannot find module 'gulp-imagemin'

After I download your gulp-starter, and I run gulp install and gulp
I got Error: Cannot find module 'gulp-imagemin'

How to deal with backbone model and collections?

we use local server with browserSync, so backbone's sync will not work.

what is the common solution for this problem?

Best way to use this?

I’m pretty comfortable using node and gulp, a bit of a git newbie – for something like this, what is the best way to use this in my project? You have the 'src' folder directly here, does that mean I need to fork this and use this as the base folder for my projects?

How do I get the latest updates? Do I have to use GitHub’s private hosting for my working files?

Browserify: split vendor/app code into 2 bundles

See https://github.com/sogko/gulp-recipes/tree/master/browserify-separating-app-and-vendor-bundles

This could be nice to include this by default to reduce build time.

Splitting oftenly modified code (app business code) from static code (library code) is also interesting if you put your single page application in production often: if you have 1 bundle, every production deployment make all the browsers reload a big fat bundle. If you have 2 bundles but the library bundle does not change the client can use the library bundle from the browser cache (using etags) thus makes the app load faster to clients on app deployments.

Link to Wiki inside ReadMe is broken

Just as title says

The HTML/JS and other optimizations

I wish there was the html minifications along with the js we use.

Also, I have a js file using browserify, but there is no uglification of it. I wonder why isn't that there.

Awaiting for response.

Thank you.

Possible to watch src/images to trigger when images added/removed?

Curious if it is possible to add a watch task to watch the src/images directory and trigger gulp images when changes occur (add, edit, delete image)

Sass slows down quite a bit with this approach

For some reason Sass compilation slows down quite a bit with this approach to organize Gulp Tasks.
For the same project I get using gulp-starter:

[BS] 2 files changed (editor.css, main.css)
[gulp] Finished 'sass' after 558 ms
[gulp] Starting 'sass'...

and without it:

[gulp] Starting 'sass'...
[gulp] Finished 'sass' after 5.05 ms
[BS] 2 files changed (editor.css, main.css)

Removing source maps and autoprefixer from the gulp-starter sass tasks seem to do no difference.

Any ideia why this might be happening? Could it be the task loader running through the task files?

Windows 7 issue

Upon trying to run "gulp" for the 1st time I received this error:

[gulp] Starting 'browserify'...
[gulp] Starting 'compass'...
[gulp] Starting 'images'...
[gulp] Starting 'watch'...
[gulp] Finished 'watch' after 14 ms
[gulp] Starting 'serve'...
[gulp] Finished 'serve' after 5.91 ms
[gulp] Starting 'open'...
[gulp] Live reload server listening on: 35729

events.js:72
throw er; // Unhandled 'error' event
^
Error: spawn Unknown system errno 193
at errnoException (child_process.js:988:11)
at Process.ChildProcess._handle.onexit (child_process.js:779:34)

Missing LICENSE?

This is a lovely package, thank you for putting it together.
There does not seem to be a LICENSE included, though.
Just thought I'd send a heads up. 🔭
Cheers

CSS injection

Hi,

This repo is a great stater for working with gulp.

Unfortunately for me, when I change the SASS file, I get a page refresh instead of CSS injection. Is this happening to you guys also or is it something with my machine?

If this happens to everyone, is there a way to get this working with CSS injection from BrowserSync?

Thank you,
Adrian

Change tabs to spaces in all files.

Is there a reason you prefer tabs over spaces?

I understand where you're coming from; I like tabs too. But, it seems that spaces are much, much more popular. Also, it's kind of evil to use tabs with tabstops set to anything other than 8 columns.

The node convention is 2 spaces for indents. I'd recommend you change to that.

If you will tell me your preferred indent (2 spaces, 4 spaces, whatever), I would be happy to make the conversion and give you a PR.

Break out configuration settings into config.json

I'm doing this elsewhere and I generally like the pattern. In /gulp/ I just put a config.json with something

{
  "serverport": 3000,
  "sass": {
    "src" : "src/sass/*.{sass, scss}",
    "dest": "./build/"
  },
  "scripts": {
    "src" : "src/javascript/**/*.js",
    "dest": "./build/"
  },
  "images": {
    "src" : "./src/images/**",
    "dest": "./build/images"
  },
  "dist": {
    "root": "./build/"
  },
  "htdocs": {
    "src": "./src/htdocs/**"
    "dest": "./build/"
  },
  "browserify": {
    "entries": ['./src/javascript/app.coffee'],
    "extensions": ['.coffee', '.hbs'],
    "bundleName": "bundle.js"
  }
}

It makes maintaining the tasks easier in the long run.

var gulp = require('gulp');
var config = require('../config.json');
var sassify = require('gulp-sass');

gulp.task('sass', function () {
  return gulp.src(config.sass.src)
    .pipe(sassify())
    .pipe(gulp.dest(config.sass.dest));
});

Good feels, nice symmetry.

Cannot find module 'underscore' when running gulp production

I get the following error when running the production build

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: Cannot find module 'underscore' from '/Users/Chris/Projects/gulp-starter'

Do you not get this error when you run the production gulp task?

Manage external bundles

I try to package all my vendors libraries (like angular, declared in my package.json browserify-shim section) in a bundle and my app specific js in another bundle.
Of course, the vendors libs must be declared as external in my app bundle.
To do that, I have added an externals param to bundleConfigs in config.js, and I have changed the browserify task like this:

if(bundleConfig.externals) {
    bundler
        .require(bundleConfig.externals)
        .external(bundleConfig.externals);
}

I would be happy to propose a pull-request for that, but right now, it does not work: I cannot require my vendors libs from my app scripts.
Am I supposed to call transform() ?

Clearer instructions when editing workflow

Hey

First off, thanks for an awesome resource :) I spent a lot of time trying to figure out this problem:

I cloned your repo into my project and went about changing bits a pieces. One thing I did straight away was remove browserSync. Then, nothing was working when I ran gulp. Then, I couldn't figure out how any tasks were running - in the default task you only specify watch. What the????

So eventually I figured out how you are running tasks - as 2nd arguments to the task itself. So after realising you were calling browserSync on watch and build on browserSync, I saw I could skip the browserSync step by instead called build on watch.

You should probably explain that in your doc for stupid people like me. I only figured it out after reading the comments of the history on tasks/watch.js :)

Switch out require(underscore) for lodash

We require lodash in the package, but import underscore somewhere.

That's the source of these "cannot find underscore" issues recently.

SASS complains with non-quoted @imports

Adding quotes around files being @imported withing app.sass fixes this issue.

Version 2 / Feedback

I'm working on semi-large refactor of this project in a 2.0 branch:
https://github.com/greypants/gulp-starter/tree/2.0

Changes:

• Full asset pipeline and static html compiling with Swig
• New directory structure
• Production mode w/ css/js compression + filename revisioning
• Remove old examples and extraneous dependecies
• Use gulp-watch to catch new files
• Upgrade misc. dependencies (BrowserSync 2!)
• Move browserify transform options out of package.json

My plan is to keep the existing version (that matches the original blog post more closely) around in a 1.0 branch and tag it for reference, and merge 2.0 into master.

Test it out, and leave your comments below.