Skip to content

Instantly share code, notes, and snippets.

@x1unix
Forked from nodesocket/README.md
Created August 9, 2016 14:38
Show Gist options
  • Save x1unix/13645fde54feed6351108744bdb6967c to your computer and use it in GitHub Desktop.
Save x1unix/13645fde54feed6351108744bdb6967c to your computer and use it in GitHub Desktop.
The perfect Gulp.js

The perfect gulp.js file

Tasks

serve

Runs a connect web server, serving files from /client on port 3000.

uglify-js

Concatenates JavaScript files, runs them through ngAnnotate (magic angular.js dependency injection), uglifies, and names the output file app.min.js.

less

Compiles less styles into a single app.css.

watch

Automatically runs uglify-js and less when relivant files are created, deleted, or modified. Also supports live reloading via a Chrome Extension.

default

Runs the serve and watch tasks. Usually this is the only task you will need to run.

Notifications

Popup task notifications (similar to growl) are provided by gulp-notify. On error notifications (either failed to compile less or JavaScript) also play a frog sound on OS X.

Help

gulp help for help.

Screenshot

var gulp = require('gulp'),
watch = require('gulp-watch'),
liveReload = require('gulp-livereload'),
concat = require('gulp-concat'),
ngAnnotate = require('gulp-ng-annotate'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
moment = require('moment'),
notify = require('gulp-notify');
less = require('gulp-less');
serve = require('gulp-serve');
require('gulp-help')(gulp, {
description: 'Help listing.'
});
gulp.task('serve', 'A simple web server.', serve({
root: ['client'],
port: 3000
}));
gulp.task('uglify-js', 'Concat, Ng-Annotate, Uglify JavaScript into a single app.min.js.', function() {
gulp.src(['client/js/libraries/**/*.js', 'client/js/source/**/*.js'])
.pipe(concat('app'))
.pipe(ngAnnotate())
.on('error', notify.onError("Error: <%= error.message %>"))
.pipe(uglify())
.on('error', notify.onError("Error: <%= error.message %>"))
.pipe(rename({
extname: ".min.js"
}))
.pipe(gulp.dest('client/js'))
.pipe(notify('Uglified JavaScript (' + moment().format('MMM Do h:mm:ss A') + ')'))
.pipe(liveReload({
auto: false
}));
});
gulp.task('less', 'Compile less into a single app.css.', function() {
gulp.src(['client/styles/bootstrap/bootstrap.less', 'client/styles/*.less'])
.pipe(concat('app'))
.pipe(less())
.on('error', notify.onError("Error: <%= error.message %>"))
.pipe(gulp.dest('client/styles'))
.pipe(notify('Compiled less (' + moment().format('MMM Do h:mm:ss A') + ')'))
.pipe(liveReload({
auto: false
}));
});
gulp.task('watch', 'Watch for changes and live reloads Chrome. Requires the Chrome extension \'LiveReload\'.', function() {
liveReload.listen();
watch({
glob: 'client/js/source/**/*.js'
}, function() {
gulp.start('uglify-js');
});
watch({
glob: 'client/styles/*.less',
}, function() {
gulp.start('less');
});
watch({
glob: 'client/views/**/*.html'
}).pipe(liveReload({
auto: false
}));
});
gulp.task('default', ['watch', 'serve']);
{
"name": "perfect-gulp",
"description": "The perfect gulp.js file",
"author": "Commando.io",
"contributors": [
{
"name": "Commando.io",
"email": "hello@commando.io"
}
],
"version": "0.0.1",
"dependencies": {},
"devDependencies": {
"gulp": "^3.8.2",
"gulp-concat": "^2.2.0",
"gulp-help": "^0.1.8",
"gulp-less": "^1.3.1",
"gulp-livereload": "^2.1.0",
"gulp-ng-annotate": "^0.2.0",
"gulp-notify": "^1.4.0",
"gulp-rename": "^1.2.0",
"gulp-serve": "^0.2.0",
"gulp-uglify": "^0.3.1",
"gulp-watch": "^0.6.8",
"moment": "^2.7.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment