Skip to content

Instantly share code, notes, and snippets.

@rohn
Last active August 29, 2015 14:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rohn/88633ddd96533eee335a to your computer and use it in GitHub Desktop.
Save rohn/88633ddd96533eee335a to your computer and use it in GitHub Desktop.
my current fast create gulpfile.js & package.json for quick web page making
var gulp = require('gulp');
var gutil = require('gulp-util');
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat');
var connect = require('gulp-connect');
var header = require('gulp-header');
var jpegoptim = require('imagemin-jpegoptim');
var jshint = require('gulp-jshint');
var livereload = require('gulp-livereload');
var optipng = require('imagemin-optipng');
var plumber = require('gulp-plumber');
var pngquant = require('imagemin-pngquant');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var svgo = require('imagemin-svgo');
var input = {
'html': 'source/*.html',
'sass': 'source/scss/**/*.scss',
'javascript': 'source/javascript/**/*.js',
'vendorjs': 'dist/assets/javascript/vendor/**/*.js',
'images': 'source/images/**/*.{png,jpg,jpeg,gif,svg}'
};
var output = {
'html': 'dist',
'stylesheets': 'dist/assets/stylesheets',
'javascript': 'dist/assets/javascript',
'images': 'dist/assets/images'
};
var onError = function(err) {
gutil.beep();
console.log(err);
this.emit('end');
};
/* run javascript through jshint */
gulp.task('jshint', function() {
return gulp.src(input.javascript)
.pipe(plumber({
errorHandler: onError
}))
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'));
});
/* compile scss files */
gulp.task('build-css', function() {
return gulp.src(input.sass)
.pipe(plumber({
errorHandler: onError
}))
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(autoprefixer({ browsers: ['last 2 version', 'Firefox < 20', '> 5%'] }))
.pipe(sourcemaps.write())
.pipe(header('/* this is a generated file, do not edit this file directly! */ \n'))
.pipe(gulp.dest(output.stylesheets))
.pipe(livereload());
});
/* concat javascript files, minify if --type production */
gulp.task('build-js', function() {
return gulp.src(input.javascript)
.pipe(plumber({
errorHandler: onError
}))
.pipe(sourcemaps.init())
.pipe(concat('bundle.js'))
//only uglify if gulp is ran with '--type production'
.pipe(gutil.env.type === 'production' ? uglify() : gutil.noop())
.pipe(sourcemaps.write())
.pipe(header('// this is a generated file, do not edit this file directly!\n'))
.pipe(gulp.dest(output.javascript))
.pipe(livereload());
});
/* move html */
gulp.task('move-html', function() {
return gulp.src(input.html)
.pipe(plumber({
errorHandler: onError
}))
.pipe(header('<!-- this is a packaged file, do not edit this file directly! -->\n'))
.pipe(gulp.dest(output.html))
.pipe(livereload());
});
/* image optimization */
gulp.task('images', function() {
return gulp.src(input.images)
.pipe(plumber({
errorHandler: onError
}))
.pipe(pngquant({quality: '65-80', speed: 4})())
.pipe(optipng({optimizationLevel: 3})())
.pipe(jpegoptim({max: 70})())
.pipe(svgo()())
.pipe(gulp.dest(output.images))
.pipe(livereload());
});
/* gulp connect */
gulp.task('connect', function() {
connect.server({
port: 9000,
root: 'dist',
livereload: true
});
});
/* Watch these files for changes and run the task on update */
gulp.task('watch', function() {
livereload.listen();
gulp.watch(input.html, ['move-html']);
gulp.watch(input.javascript, ['jshint', 'build-js']);
gulp.watch(input.sass, ['build-css']);
});
/* run the watch task when gulp is called without arguments */
gulp.task('default', ['images', 'move-html', 'jshint', 'build-js', 'build-css', 'connect', 'watch']);
gulp.task('build', ['images', 'move-html', 'jshint', 'build-js', 'build-css']);
gulp.task('serve', ['default']);
{
"name": "gulpfile",
"version": "1.0.0",
"description": "gulpfile.js and package.json for quick web making",
"author": "@rohn",
"license": "MIT",
"devDependencies": {
"gulp": "~3.8.10",
"gulp-autoprefixer": "^2.1.0",
"gulp-concat": "^2.5.2",
"gulp-connect": "^2.2.0",
"gulp-header": "^1.2.2",
"gulp-jshint": "~1.9.0",
"gulp-livereload": "^3.8.0",
"gulp-plumber": "^0.6.6",
"gulp-sass": "~1.3.2",
"gulp-sourcemaps": "~1.3.0",
"gulp-util": "~3.0.2",
"imagemin-jpegoptim": "^4.0.0",
"imagemin-optipng": "^4.2.0",
"imagemin-pngquant": "^4.0.0",
"imagemin-svgo": "^4.1.2",
"jshint-stylish": "~1.0.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment