vigetlabs / blendid Goto Github PK
View Code? Open in Web Editor NEWA delicious blend of gulp tasks combined into a configurable asset pipeline and static site builder
License: MIT License
A delicious blend of gulp tasks combined into a configurable asset pipeline and static site builder
License: MIT 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
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
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.
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.
I am searching for an example for Gulp Handlebars and noticed the example gulpfile.js is essentially a blank canvas.
We require lodash in the package, but import underscore somewhere.
That's the source of these "cannot find underscore" issues recently.
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.
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)
we use local server with browserSync, so backbone's sync will not work.
what is the common solution for this problem?
That would:
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.
Which obviously can't be found. This is the default project, what's going wrong here?
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)
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.
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)
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.
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?
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:
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.
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.
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.
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
the following split will not work on windows machine
var buildPath = __dirname.split('/gulp/tasks')[0];
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
See #92 for details.
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.
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?
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?
That path looks wrong to me
https://github.com/greypants/gulp-starter/blob/master/package.json#L10
"browser": {
"underscore": "backbone/node_modules/underscore",
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.
"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']);
Just as title says
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)
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
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
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?
Specifically around watching files when not using a markup task. Also, I need to replace the markup task with something that actually does something.
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"
Here are two tests.
console.log("waht")
is executed in app.controller.js
. What I notice is a link instead to the concatenated Browserify'd file app.js
.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?
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?
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?
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));
};
After I download your gulp-starter, and I run gulp install and gulp
I got Error: Cannot find module 'gulp-imagemin'
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.
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.
I guess you're not using **
because of performance reasons, but it'd be useful if it can watch subdirectories as well.
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?
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 :)
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:
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).
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() ?
Do you see this behavior?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.