Skip to content

Instantly share code, notes, and snippets.

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": "*"
}
}
@cwjones73

This comment has been minimized.

Copy link

commented Feb 25, 2018

I fixed the I'm receiving jshint error by globally installing a downgrade version + jshint@2.8.0
npm install -g --save-dev jshint

I'm not getting an error with css:

[09:01:02] Using gulpfile /Library/WebServer/Documents/app/gulpfile.js
(node:8024) [DEP0025] DeprecationWarning: sys is deprecated. Use util instead.
[09:01:02] Starting 'clean'...
[09:01:02] Finished 'clean' after 18 ms
[09:01:02] Starting 'default'...
[09:01:02] Starting 'css'...
[09:01:02] 'css' errored after 2.73 ms
[09:01:02] TypeError: glob pattern string required
at new Minimatch (/Library/WebServer/Documents/app/node_modules/minimatch/minimatch.js:116:11)
at setopts (/Library/WebServer/Documents/app/node_modules/gulp-ruby-sass/node_modules/glob/common.js:118:20)
at new GlobSync (/Library/WebServer/Documents/app/node_modules/gulp-ruby-sass/node_modules/glob/sync.js:40:3)
at Function.globSync [as sync] (/Library/WebServer/Documents/app/node_modules/gulp-ruby-sass/node_modules/glob/sync.js:26:10)
at gulpRubySass (/Library/WebServer/Documents/app/node_modules/gulp-ruby-sass/index.js:71:21)
at Gulp. (/Library/WebServer/Documents/app/gulpfile.js:51:16)
at module.exports (/Library/WebServer/Documents/app/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/Library/WebServer/Documents/app/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/Library/WebServer/Documents/app/node_modules/orchestrator/index.js:214:10)
at Gulp.Orchestrator.start (/Library/WebServer/Documents/app/node_modules/orchestrator/index.js:134:8)

I'm new to gulp and npm, coming from apache servers (used to using webSever dir), I may have the whole directory configuration confused. Any help would be appreciated.

At the moment, I've got this file structure:

|- WebServer
>>|- documents
>>>|- app
>>>|- node_modules (dependences)
>>>>|- assests - (index.php)
>>>>|- css (styles.css)
>>>>|- images (no files)
>>>>|- js (no files)
>>>>|- scss (no files)
>>>>gulpfile.js
>>>>package.json
>>>>package-lock.json

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.