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

Revisions

  1. aaronwaldon revised this gist Jul 24, 2014. 1 changed file with 11 additions and 1 deletion.
    12 changes: 11 additions & 1 deletion 1) readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -45,7 +45,17 @@ Copy the gulp.js file (below) to the base of your site. The provided gulp.js fil
    * (gulp.png)[https://dl.dropboxusercontent.com/u/12922578/gulp.png]


    ## Start Growl

    Make sure Growl is running, as notification will appear in it whenever the browser is livereloaded or whenever there is an error.


    ## Run Gulp

    * To just compile the scripts and SCSS one time, simply run the default command `gulp`. You can also run any of the other task names, like `gulp styles`.
    * 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 to style and javascript files in the *src* directory, or to any template files in the *templates* directory.
    * 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 to style and javascript files in the *src* directory, or to any template files in the *templates* directory.


    ## Customize

    You can change the title and image that show up in the Growl messages, by editing the `notifyInfo` object values. :)
  2. aaronwaldon revised this gist Jul 24, 2014. 2 changed files with 45 additions and 62 deletions.
    3 changes: 2 additions & 1 deletion 1) readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -15,7 +15,7 @@ I freaking love working with technologies like Grunt and Gulp, and wanted to sha

    If a package.json file already exists with list of all of the dependencies that Gulp will need for the project, then you can simply switch to the project root directory in the site terminal and run the command `npm install`. This only needs to happen once so that the dependencies can be downloaded for the project.

    If a package.json file does not exist, switch to the project root directory for the site in a terminal. For this configuration, you can install gulp and the needed 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`. You only need to do this once so that the dependencies can be downloaded for the project.
    If a package.json file does not exist, switch to the project root directory for the site in a terminal. For this configuration, you can install gulp and the needed dependencies using the command `npm install gulp gulp-compass gulp-autoprefixer gulp-minify-css gulp-uglify gulp-rename gulp-concat gulp-notify gulp-livereload gulp-plumber --save-dev`. You only need to do this once so that the dependencies can be downloaded for the project.


    ## Add the gulp.js file
    @@ -42,6 +42,7 @@ Copy the gulp.js file (below) to the base of your site. The provided gulp.js fil
    * templates/ (EE templates)
    * gulpfile.js
    * package.json (will be added when gulp is installed via CLI)
    * (gulp.png)[https://dl.dropboxusercontent.com/u/12922578/gulp.png]


    ## Run Gulp
    104 changes: 43 additions & 61 deletions 2) gulpfile.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,22 +1,34 @@
    //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();
    var gulp = require('gulp'),
    compass = require('gulp-compass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    livereload = require('gulp-livereload'),
    plumber = require('gulp-plumber'),
    path = require('path');

    //the title and icon that will be used for the Grunt notifications
    var notifyInfo = {
    title: 'Gulp',
    icon: path.join(__dirname, 'gulp.png')
    };

    //error notification settings for plumber
    var plumberErrorHandler = { errorHandler: notify.onError({
    title: notifyInfo.title,
    icon: notifyInfo.icon,
    message: "Error: <%= error.message %>"
    })
    };

    //styles
    gulp.task('styles', function() {
    return gulp.src(['src/scss/**/*.scss'])
    .pipe(plumber(plumberErrorHandler))
    .pipe(compass({
    css: 'html/css',
    sass: 'src/scss',
    @@ -26,70 +38,40 @@ gulp.task('styles', function() {
    .pipe(gulp.dest('html/css'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest('html/css'))
    .pipe(refresh(server));
    .pipe(gulp.dest('html/css'));
    });

    //scripts
    gulp.task('scripts', function() {
    return gulp.src('src/js/**/*.js')
    //.pipe(jshint('.jshintrc'))
    //.pipe(jshint.reporter('default'))
    .pipe(plumber(plumberErrorHandler))
    .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);
    });
    .pipe(gulp.dest('html/js'));
    });

    //watch
    gulp.task('live', function() {
    gulp.run('livereload', 'styles');
    livereload.listen();

    //watch .scss files
    gulp.watch('src/scss/**/*.scss', function(event) {
    gulp.run('styles');
    });
    gulp.watch('src/scss/**/*.scss', ['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');
    //});
    gulp.watch('src/js/**/*.js', ['scripts']);

    //watch template files
    gulp.watch('templates/**/*.html', function(event) {
    gulp.run('html');
    //reload when a template file, the minified css, or the minified js file changes
    gulp.watch('templates/**/*.html', 'html/css/styles.min.css', 'html/js/main.min.js', function(event) {
    gulp.src(event.path)
    .pipe(plumber())
    .pipe(livereload())
    .pipe(notify({
    title: notifyInfo.title,
    icon: notifyInfo.icon,
    message: event.path.replace(__dirname, '').replace(/\\/g, '/') + ' was ' + event.type + ' and reloaded'
    })
    );
    });
    });
  3. aaronwaldon renamed this gist Jul 24, 2014. 1 changed file with 0 additions and 0 deletions.
    0 2) gulp.js → 2) gulpfile.js
    View file
    File renamed without changes.
  4. aaronwaldon revised this gist Jan 27, 2014. 1 changed file with 22 additions and 9 deletions.
    31 changes: 22 additions & 9 deletions 1) readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,18 +1,31 @@
    ### Install Node.js
    # How to set up Gulp with an ExpressionEngine project

    I freaking love working with technologies like Grunt and Gulp, and wanted to share how to get my current EE front-end workflow set up. With a few tweaks, this can also be used with virtually any other sites (I've used it with Laravel, static sites, Craft, etc).

    ## Install Node.js

    * If Node is not yet installed on the machine, it will need to be [installed](http://nodejs.org/download/)


    ### Install Gulp
    ## Install Gulp (if needed)

    * 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 Directory Structure
    ### Install Gulp for the project (if needed)

    If a package.json file already exists with list of all of the dependencies that Gulp will need for the project, then you can simply switch to the project root directory in the site terminal and run the command `npm install`. This only needs to happen once so that the dependencies can be downloaded for the project.

    If a package.json file does not exist, switch to the project root directory for the site in a terminal. For this configuration, you can install gulp and the needed 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`. You only need to do this once so that the dependencies can be downloaded for the project.


    ## Add the gulp.js file

    Copy the gulp.js file (below) to the base of your site. The provided gulp.js file is set up to work with the following project directory structure.


    ## Project Directory Structure

    * project root/
    * config/ ([Master Config](https://github.com/focuslabllc/ee-master-config) files)
    * html/ (web root)
    * css/
    * js/
    @@ -31,7 +44,7 @@
    * package.json (will be added when gulp is installed via CLI)


    ### Run Gulp
    ## Run Gulp

    * To just compile the scripts and SCSS one time, simply run the command `gulp`. You can also run any of the other task names, like `gulp styles`.
    * 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.
    * To just compile the scripts and SCSS one time, simply run the default command `gulp`. You can also run any of the other task names, like `gulp styles`.
    * 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 to style and javascript files in the *src* directory, or to any template files in the *templates* directory.
  5. aaronwaldon revised this gist Jan 27, 2014. 3 changed files with 5 additions and 0 deletions.
    0 readme.md → 1) readme.md
    View file
    File renamed without changes.
    0 gulp.js → 2) gulp.js
    View file
    File renamed without changes.
    5 changes: 5 additions & 0 deletions 3) .gitignore
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    #node files
    /node_modules/*

    #sass cache files
    .sass-cache
  6. aaronwaldon revised this gist Jan 27, 2014. 1 changed file with 3 additions and 7 deletions.
    10 changes: 3 additions & 7 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -9,7 +9,7 @@
    * 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
    ### Project Directory Structure

    * project root/
    * config/ ([Master Config](https://github.com/focuslabllc/ee-master-config) files)
    @@ -33,9 +33,5 @@

    ### 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
    * To just compile the scripts and SCSS one time, simply run the command `gulp`. You can also run any of the other task names, like `gulp styles`.
    * 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.
  7. aaronwaldon revised this gist Jan 27, 2014. 1 changed file with 18 additions and 17 deletions.
    35 changes: 18 additions & 17 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -11,23 +11,24 @@

    ### Project Structure

    config ([Master Config](https://github.com/focuslabllc/ee-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)
    * project root/
    * config/ ([Master Config](https://github.com/focuslabllc/ee-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
  8. aaronwaldon revised this gist Jan 27, 2014. 1 changed file with 10 additions and 10 deletions.
    20 changes: 10 additions & 10 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -13,17 +13,17 @@

    config ([Master Config](https://github.com/focuslabllc/ee-master-config) files)
    html (web root)
    =css
    =js
    =images
    +css
    +js
    +images
    src
    =js
    ==plugins.js
    ==site.js
    ==[various .js files]
    =scss
    ==[various .scss files]
    ==styles.scss
    +js
    ++plugins.js
    ++site.js
    ++[various .js files]
    +scss
    ++[various .scss files]
    ++styles.scss
    system (EE system folder)
    templates (EE templates)
    gulpfile.js
  9. aaronwaldon revised this gist Jan 27, 2014. 1 changed file with 19 additions and 23 deletions.
    42 changes: 19 additions & 23 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -9,29 +9,25 @@
    * 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)
    ### Project Structure

    config ([Master Config](https://github.com/focuslabllc/ee-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
  10. aaronwaldon revised this gist Jan 27, 2014. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -9,8 +9,8 @@
    * 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
    -base
    --config

    ++html (web root)
    +++css
  11. aaronwaldon created this gist Jan 27, 2014.
    95 changes: 95 additions & 0 deletions gulp.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,95 @@
    //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');
    });
    });
    44 changes: 44 additions & 0 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,44 @@
    ### Install Node.js

    * If Node is not yet installed on the machine, it will need to be [installed](http://nodejs.org/download/)


    ### 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