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