Skip to content

Instantly share code, notes, and snippets.

@aaronwaldon

aaronwaldon/1) readme.md

Last active March 30, 2025 19:51
Show Gist options
  • Save aaronwaldon/8657432 to your computer and use it in GitHub Desktop.
Save aaronwaldon/8657432 to your computer and use it in GitHub Desktop.
Download ZIP
How to set up Gulp for Compass compilation and minification, JavaScript minification, livereloading, and use with ExpressionEngine.
Raw
readme.md

Install Node.js

  • If Node is not yet installed on the machine, it will need to be installed

Install Gulp

  • If Gulp has never been set up on the machine, the gulp CLI will also need to be installed by running npm install gulp -g
  • To install Gulp for the project (this only needs to happen once), switch to the root directory for the site in a terminal. For my configuration, you can install gulp and the dependencies using the command npm install gulp-compass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-rename gulp-livereload tiny-lr gulp-cache --save-dev. Again, you only need to do this once.
  • Make sure and copy the gulp.js file to the base of your site. The provided gulp.js file is set up for the following file configuration

Project Structure

config (Master Config files) html (web root) +css +js +images src +js ++plugins.js ++site.js ++[various .js files] +scss ++[various .scss files] ++styles.scss system (EE system folder) templates (EE templates) gulpfile.js package.json (will be added when gulp is installed via CLI)

Run Gulp

  • To just compile the scripts and SCSS one time, simply run the command gulp.
  • To watch the templates, .scss, and .js files for changes, and to automatically compile and minify the relevant files, run the command gulp live. If the livereload browser extensions are installed and enabled, the browser will automatically refresh when any changes are made.

Directory Structure

Raw
gulp.js
//load plugins
var gulp = require('gulp'),
compass = require('gulp-compass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
//jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
refresh = require('gulp-livereload'),
lr = require('tiny-lr'),
server = lr();
//styles
gulp.task('styles', function() {
return gulp.src(['src/scss/**/*.scss'])
.pipe(compass({
css: 'html/css',
sass: 'src/scss',
image: 'html/images'
}))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('html/css'))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest('html/css'))
.pipe(refresh(server));
});
//scripts
gulp.task('scripts', function() {
return gulp.src('src/js/**/*.js')
//.pipe(jshint('.jshintrc'))
//.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest('html/js'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('html/js'))
.pipe(refresh(server));
});
//html
gulp.task('html', function() {
return gulp.src('templates/**/*.html')
.pipe(refresh(server));
});
//images
gulp.task('images', function() {
return gulp.src('html/images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(refresh(server))
.pipe(gulp.dest('html/images'));
});
//default task
gulp.task('default', [], function() {
gulp.run('styles', 'scripts' ); //, 'images');
});
gulp.task('livereload', function(){
server.listen(35729, function(err){
if(err) return console.log(err);
});
});
//watch
gulp.task('live', function() {
gulp.run('livereload', 'styles');
//watch .scss files
gulp.watch('src/scss/**/*.scss', function(event) {
gulp.run('styles');
});
//watch .js files
gulp.watch('src/js/**/*.js', function(event) {
gulp.run('scripts');
});
//watch image files
//gulp.watch('html/images/**/*', function(event) {
// console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
// gulp.run('images');
//});
//watch template files
gulp.watch('templates/**/*.html', function(event) {
gulp.run('html');
});
});
@tyssen
Copy link

tyssen commented Jan 31, 2014

For anyone who downloads gulp.js (#2), remember to rename it to gulpfile.js otherwise Gulp won't run.

@tdaubs
Copy link

tdaubs commented Sep 25, 2014

Thanks for sharing Aaron. This is sweet!

@yemi
Copy link

yemi commented Oct 10, 2014

Thanks for this, appreciate it!

@jopfre
Copy link

jopfre commented Mar 20, 2015

think line 66 should pass the file location arguments as an array, e.g.
gulp.watch(['templates/*/.html', 'html/css/styles.min.css', 'html/js/main.min.js'], function(event) {

@brunopulis
Copy link

Awesome thanks @aaronwaldon 😄

@zachcb
Copy link

zachcb commented Apr 14, 2015

Very helpful

@ben-maystreet
Copy link

Tried to run this but it says "Task 'default' is not in your gulpfile", anyone has a quick fix for that? I'm really new to gulp. Thanks guys!

@timhuijgen
Copy link

@ben-maystreet

To run a default task add it to the file like this:
gulp.task('default', ['live']);

@jhovanic
Copy link

There's one thing when rename is executed I end up with 2 files one without the suffix and the other with the suffix. Am I doing something wrong ?

@heyjordn
Copy link

This gave me an error when I ran "gulp live"

TypeError: Cannot assign to read only property 'mark' of styles.min.css
    at new Gaze (/home/proxima/Desktop/Code/GULP/master-gulp-file/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:41:13)
    at gaze (/home/proxima/Desktop/Code/GULP/master-gulp-file/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:86:10)
    at Object.module.exports [as watch] (/home/proxima/Desktop/Code/GULP/master-gulp-file/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/index.js:12:17)
    at Gulp.watch (/home/proxima/Desktop/Code/GULP/master-gulp-file/node_modules/gulp/index.js:40:14)
    at Gulp.<anonymous> (/home/proxima/Desktop/Code/GULP/master-gulp-file/gulpfile.js:66:8)
    at module.exports (/home/proxima/Desktop/Code/GULP/master-gulp-file/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/home/proxima/Desktop/Code/GULP/master-gulp-file/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/home/proxima/Desktop/Code/GULP/master-gulp-file/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
    at Gulp.Orchestrator.start (/home/proxima/Desktop/Code/GULP/master-gulp-file/node_modules/gulp/node_modules/orchestrator/index.js:134:8)
    at /usr/local/lib/node_modules/gulp/bin/gulp.js:129:20

I don't know if any one else has this problem but I solved it by just putting the file names in an array and passed it to the watch function

  var files = ['templates/**/*.html', 'html/css/styles.min.css', 'html/js/main.min.js'];
  gulp.watch(files, function(event) {
    ....

original

 gulp.watch('templates/**/*.html', 'html/css/styles.min.css', 'html/js/main.min.js', function(event) {

@justinrclarke
Copy link

After following the steps above, I receive this: Error: You need to have Ruby and Compass installed and in your system PATH for this task to work.

@pkarjala
Copy link

@gurujust1n Just came across your comment. gruntjs/grunt-contrib-compass#66 may be of help in sorting out your error message.

@masoudgs
Copy link

masoudgs commented Mar 2, 2016

awesome

@ttson24
Copy link

ttson24 commented Jul 9, 2016 •
edited
Loading

thank a lot. but i run it. i see folder css in scss folder. how do suite i do?

@sumeshkp18
Copy link

Thanks @pr0x1m4

@phivh
Copy link

phivh commented Feb 17, 2017

Thanks! it's useful.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment