Skip to content

Instantly share code, notes, and snippets.

@Ehesp
Created September 16, 2014 12:03
Show Gist options
  • Save Ehesp/1a476b8c409b0535779d to your computer and use it in GitHub Desktop.
Save Ehesp/1a476b8c409b0535779d to your computer and use it in GitHub Desktop.
Gulp Workflow Snippet
{
"directory" : "src/assets/components"
}
# Node modules
/node_modules
# Bower components
/src/assets/components
/dist/

Gulp Workflow Snippet

With node, bower and gulp installed:

  1. Create your project in a src directory.
  2. All assets (css, js, images, components (from bower)) are placed within the src/assets/ directory.
  3. Any templates/pages go within the src/pages directory.
  4. Create your index.htmlfile within src, and place any scripts or stylesheets within blocks:
  <!-- build:css css/styles.min.css -->
	<link rel="stylesheet" href="assets/components/bootstrap-css-only/css/bootstrap.min.css">
	<link rel="stylesheet" href="assets/components/font-awesome/css/font-awesome.min.css">
  <!-- endbuild -->
  
	<!-- build:js js/app.min.js -->
	<script src="assets/components/angular/angular.min.js"></script>
	<script src="assets/components/angular-route/angular-route.min.js"></script>
	<!-- endbuild -->
  1. Run gulp. This will build all of your files from src into a singular, concatenated minified file into a dist directory.
  2. Any pages or additional directories (in this case api will be copied over).
  3. Run gulp dev to work on the src files and have them built into dist in real time with live reload.
var gulp = require('gulp'),
clean = require('gulp-clean'),
jshint = require('gulp-jshint'),
usemin = require('gulp-usemin'),
minifyJS = require('gulp-uglify'),
minifyCSS = require('gulp-minify-css'),
rev = require('gulp-rev'),
runSequence = require('run-sequence'),
connect = require('gulp-connect');
/**
* Paths
*/
var paths = {
js: './src/assets/js/**/*.js',
css: './src/assets/css/**/*.css',
images: './src/assets/images/**.*',
index: './src/index.html',
pages: './src/pages/**.*',
api: './src/api/**.*',
dist: './dist',
};
/**
* JSHint - Check for JS errors
*/
gulp.task('jshint', function() {
return gulp.src(paths.js)
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
/**
* Clean - Clean out dist directory
*/
gulp.task('clean', function () {
return gulp.src(paths.dist, {read: false})
.pipe(clean());
});
/**
* Copy some files to dist
*/
gulp.task('copy', ['copy-pages', 'copy-api', 'copy-images']);
gulp.task('copy-pages', function() {
return gulp.src(paths.pages)
.pipe(gulp.dest(paths.dist + '/pages'));
});
gulp.task('copy-api', function() {
return gulp.src(paths.api)
.pipe(gulp.dest(paths.dist + '/api'));
});
gulp.task('copy-images', function() {
return gulp.src(paths.images)
.pipe(gulp.dest(paths.dist + '/images'));
});
/**
* Minify all files into one and link this in our distribution output
*/
gulp.task('usemin', ['usemin-css', 'usemin-js']);
gulp.task('usemin-css', function() {
return gulp.src(paths.index)
.pipe(usemin({
css: [minifyCSS(), rev(), 'concat']
}))
.pipe(gulp.dest(paths.dist));
});
gulp.task('usemin-js', function() {
return gulp.src(paths.index)
.pipe(usemin({
js: [minifyJS(), rev(), 'concat']
}))
.pipe(gulp.dest(paths.dist));
});
/**
* Watch for file chnages, and carry out a task. Then reload the page.
*/
gulp.task('watch', function () {
gulp.watch([paths.css], ['usemin-css']);
gulp.watch([paths.js], ['usemin-js']);
gulp.watch([paths.pages], ['copy-pages']);
gulp.watch([paths.api], ['copy-api']);
gulp.watch([paths.images], ['copy-images']);
connect.reload();
});
/**
* Create a local live reload server
*/
gulp.task('connect', function() {
connect.server({
root: paths.dist,
port: 8080,
livereload: true
});
});
/**
* `gulp` task
*/
gulp.task('default', function() {
runSequence('jshint', 'clean', 'copy', 'usemin');
});
/**
* `gulp dev` task
*/
gulp.task('dev', ['connect', 'watch']);
{
"name": "Name",
"description": "Description",
"version": "0.0.1",
"author": "Name",
"devDependencies": {
"bower": "^1.3.9",
"gulp": "~3.8.0",
"gulp-jshint": "~1.8.4",
"gulp-clean": "~0.3.1",
"gulp-usemin": "~0.3.8",
"gulp-uglify": "~1.0.1",
"gulp-minify-css": "~0.3.8",
"run-sequence": "~0.3.6",
"gulp-rev": "~1.1.0",
"gulp-connect": "~2.0.6",
"gulp-watch": "~1.0.4"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment