Skip to content

Instantly share code, notes, and snippets.

@R3TSU R3TSU/Gulpfile forked from davidnknight/Gulpfile
Created Aug 31, 2017

Embed
What would you like to do?
A well structured gulpfile that performs CSS, JS, image and PHP tasks with an abstract config.
Specifically, this gruntfile will perform the following.
- CSS:
-- Compile SCSS
-- Add vendor prefixes for the last 10 browser versions
- JS:
-- Run scripts through jshint to detect errors and potential problems in code.
-- Compile scripts to your destination folder in their original state. Use these in development environments as they'll be easier to debug with as their code doesn't exist on 1 line, nor is it obfuscated.
-- Minify and concatenate scripts into one all.min.js. Uglify will also obfuscate code if you set mangle to true, leave as false if using AngularJS.
- Images:
-- Optimise images for web.
- PHP:
-- Run phpunit tests.
Additionally, note:
- The build (destination) folders will be cleaned (removed) before compiling when you run `gulp` or `gulp clean`.
- Only changed javascript files will trigger the JS task, improving task speed.
- Only changed images will be optimised, improving task speed.
// Required Plugins
var gulp = require('gulp'),
gutil = require('gulp-util'),
notify = require('gulp-notify'),
scss = require('gulp-ruby-sass'),
autoprefix = require('gulp-autoprefixer'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
concat = require('gulp-concat'),
changed = require('gulp-changed'),
clean = require('gulp-clean'),
cache = require('gulp-cache'),
exec = require('child_process').exec,
sys = require('sys');
// Config
var paths = {
scss: 'app/assets/scss/**/*.scss',
js: 'app/assets/js/**/*.js',
images: 'app/assets/images/**/*',
php: 'app/**/*.php'
},
dests = {
css: 'public/css',
js: 'public/js',
images: 'public/images'
},
options = {
autoprefix: 'last 10 version',
imagemin: { optimizationLevel: 3, progressive: true, interlaced: true },
jshint: '',
jshint_reporter: 'default',
scss: { style: 'compressed', compass: true },
uglify: { mangle: false },
clean: { read: false }
};
// Clean
gulp.task('clean', function() {
return gulp.src([
dests.css, dests.js, dests.images
], options.clean )
.pipe( clean() )
.pipe( notify( { message: 'Clean task complete.' } ) )
});
// CSS
gulp.task('css', function () {
return gulp.src( paths.scss )
.pipe( scss( options.scss ).on( 'error', gutil.log ) )
.pipe( autoprefix( options.autoprefix ) )
.pipe( gulp.dest( dests.css ) )
.pipe( notify( { message: 'CSS task complete.' } ) )
});
// JS
gulp.task('js', function () {
return gulp.src( paths.js )
.pipe( changed( dests.js ) )
.pipe( jshint( options.jshint ) )
.pipe( jshint.reporter( options.jshint_reporter ) )
.pipe( gulp.dest( dests.js ) )
.pipe( uglify( options.uglify ) )
.pipe( concat( 'all.min.js' ) )
.pipe( gulp.dest( dests.js ) )
.pipe( notify( { message: 'Scripts task complete.' } ) )
});
// Images
gulp.task('images', function() {
return gulp.src( paths.images )
.pipe( cache( imagemin( options.imagemin ) ) )
.pipe( gulp.dest( dests.images ) )
.pipe( notify( { message: 'Images task complete.' } ) )
});
// PHP
gulp.task('phpunit', function() {
exec('phpunit', function(error, stdout) {
sys.puts(stdout);
});
});
// Watch
gulp.task('watch', function () {
gulp.watch( paths.scss, ['css'] );
gulp.watch( paths.js, ['js'] );
gulp.watch( paths.images, ['images'] );
gulp.watch( paths.php, ['phpunit'] );
});
// Global
gulp.task('default', ['clean'], function() {
gulp.start('css', 'js', 'images', 'watch');
});
{
"devDependencies": {
"gulp": "~3.*",
"gulp-ruby-sass": "~0.*",
"gulp-util": "~2.*",
"gulp-autoprefixer": "0.*",
"gulp-notify": "~1.*",
"gulp-jshint": "~1.*",
"gulp-uglify": "0.*",
"gulp-concat": "*",
"gulp-imagemin": "*",
"gulp-changed": "~0.3.0",
"gulp-clean": "*",
"gulp-cache": "*"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.