my current fast create gulpfile.js & package.json for quick web page making
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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']); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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