setting up sass & gulp

step by step how-to for getting this stuff working via the command line*

*mac-specific

install sass (docs)

  1. install sass
    sudo gem install sass
  2. double check install
    sass -v

install npm (tutorial)

  1. download and install node.js (npm is included in this package) from https://nodejs.org/en/
  2. once node is installed, double check npm install
    sudo npm install npm -g

install gulp (tutorial)

  1. navigate to project directory (theme directory if using wordpress)
    cd [project root]
  2. start npm
    npm init → fill out json
  3. install gulp
    sudo npm install -g gulp
  4. double check gulp install
    gulp -v
  5. save gulp to your project dependencies
    npm install --save-dev gulp

install gulp dependencies

install gulp plugins
sudo npm install [plugins listed, separated by spaces] --save-dev

  • gulp-sass – compiles sass files
  • gulp-autoprefixer – prefixes css using autoprefixer
  • gulp-sourcemaps — allows you to see the original source scss instead of the compiled css while debugging
  • gulp-minify-css – minifies css using clean-css
  • gulp-jshint – detects errors and potential problems in javascript
  • gulp-uglify – minifies files with uglifyjs
  • gulp-concat – concatenates files
  • gulp-rename – simple file renaming methods

example to copy+paste
sudo npm install gulp-sass gulp-autoprefixer gulp-sourcemaps gulp-minify-css gulp-jshint gulp-uglify gulp-concat gulp-rename --save-dev

gulpfile.js

create gulpfile.js in your project root (↓ download example gulpfile)

start gulp watch task

gulp watch

bonus: browser-sync (docs)

  1. install browser-sync
    sudo npm install browser-sync --save-dev
  2. include the browser-sync plugin in your gulpfile
    var browserSync = require('browser-sync');
  3. assign the browserSync.reload method to a variable called reload
    var reload = browserSync.reload;

bonus: browser-sync (continued)

  1. add a serve task to our gulpfile, replacing yourlocal.dev with the path to the project on your local serve
    gulp.task('serve', function() {
      browserSync.init(watchFiles, {
        proxy: 'yourlocal.dev',
        notify: false
      });
    });
  2. call reload after your scss has finished compiling to css (after the final gulp.dest move to production)
    .pipe(reload({stream:true}));
  3. start the browser-sync server
    gulp serve
  4. navigate to the local or external access urls provided
    example:
    Local: http://localhost:3002
    External: http://192.168.95.139:3002

(↓ download example gulpfile with browser-sync)

notes

  • gulp serve and gulp watch only have to run once each while you are working on a project. i recommend having them running in 2 different tabs in the same termainal window. if you need to restart at any point, quit each of the tasks with control+C, and restart by starting each gulp task again. you will have to restart the tasks any time you close the terminal windows or tabs they are running in as well.
  • the node_modules folder should not be in included your git repo. since these files are handled by npm and owned by third party developers, the node_modules folder is usually added to your .gitignore file. a better workflow is to save the dependencies with npm install gulp-jshint --save or npm install gulp-jshint --save-dev. the next person to use your code the just has to run npm install and all dependencies will be downloaded.