Skip to content

Instantly share code, notes, and snippets.

@tdaubs

tdaubs/1) gulp_w_expressionengine.readme

Forked from aaronwaldon/1) readme.md
Last active August 29, 2015 14:06
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tdaubs/3be05f1029aed726a626 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tdaubs/3be05f1029aed726a626 to your computer and use it in GitHub Desktop.
Download ZIP
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

+base ++config

++html (web root) +++css +++js +++images

++src +++js ++++plugins.js ++++site.js +++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');
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment