chris-at-github
10/21/2014 - 4:12 AM

install and configure gulp

install and configure gulp

// install
npm install --save-dev gulp-consolidate gulp-iconfont gulp-postcss gulp-svgmin lodash

// include icon font generator
var postcss 		= require('gulp-postcss');
var iconfont 		= require('gulp-iconfont');
var svgmin 			= require('gulp-svgmin');
var consolidate	= require('gulp-consolidate');

// Create icon font.
gulp.task('iconfont', ['iconfont-optimize'], function() {
	return gulp.src(['Source/Fonts/*.svg'])
		.pipe(plumber())
		.pipe(iconfont({
			fontName: 'icons',
			appendCodepoints: true,
			normalize: true
		}))
		.on('codepoints', function(codepoints, options) {
			gulp.src('Source/Fonts/_icons.scss')
				.pipe(consolidate('lodash', {
					glyphs: codepoints,
					fontName: 'icons',
					fontPath: '../Fonts/',
					className: 'icon'
				}))
				.pipe(gulp.dest('Source/Scss/'))
		})
		.pipe(gulp.dest('Fonts/'));
});

// Optimize SVG for icon font.
gulp.task('iconfont-optimize', function() {
	return gulp.src(['Source/Fonts/*.svg'])
		.pipe(plumber())
		.pipe(svgmin([
			{ removeDesc: true },
			{ removeTitle: true }
		]))
		.pipe(gulp.dest('Source/Fonts/'));
});
// include gulp
var gulp = require('gulp');

// include error handling plugins
var plumber = require('gulp-plumber');

// include imagemin plugins
var changed		= require('gulp-changed');
var imagemin	= require('gulp-imagemin');

// include js plugins
// var browserify	= require('gulp-browserify'); optional
var concat			= require('gulp-concat');
var stripDebug	= require('gulp-strip-debug');
var uglify			= require('gulp-uglify');

// include css plugins
var sass				= require('gulp-sass');
var autoprefix	= require('gulp-autoprefixer');
var minifyCSS		= require('gulp-minify-css');

// minify new images
gulp.task('imagemin', function() {
	var imageSource	= './src/images/**/*',
			imageBuild	= './images';

	gulp.src(imageSource)
		.pipe(changed(imageBuild))
		.pipe(imagemin())
		.pipe(gulp.dest(imageBuild));
});

// JS concat, strip debugging and minify
gulp.task('scripts', function() {
//	gulp.src('src/js/app.js')
//		.pipe(plumber())
//		.pipe(browserify({
//			insertGlobals: true
//		}))
//		.pipe(uglify())
//		.pipe(gulp.dest('./js/'));  
  
	gulp.src(['./src/js/*.js'])
		.pipe(plumber())
		.pipe(concat('script.js'))
		.pipe(stripDebug())
		.pipe(uglify())
		.pipe(gulp.dest('./js/'));
});

// CSS concat, auto-prefix and minify
gulp.task('styles', function() {
	gulp.src('./src/scss/*.scss')
		.pipe(plumber())	
		.pipe(sass())
		.pipe(autoprefix('last 2 versions'))
		.pipe(minifyCSS())
		.pipe(gulp.dest('./css/'));
});

// default gulp task
gulp.task('default', ['imagemin', 'scripts', 'styles'], function() {
	// watch for JS changes
	gulp.watch('./src/js/*.js', function() {
		gulp.run('scripts');
	});

	// watch for CSS changes
	gulp.watch('./src/scss/*.scss', function() {
		gulp.run('styles');
	});
});
npm install gulp-changed gulp-imagemin gulp-concat gulp-strip-debug gulp-uglify gulp-autoprefixer gulp-minify-css gulp-sass gulp-plumber --save-dev

// optional
npm install gulp-browserify --save-dev 
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
npm install gulp --save-dev