gulpWorkflow.md

GULP Workflow

Steps to set up project.

1. Create project folder. mkdir projectName
2. Initialize npm project. npm init
3. Setup project gulpfile.js:

{
  "name": "projectName",
  "version": "1.0.0",
  "description": "projectDescription",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "gulp",
    "sass"
  ],
  "author": "David Beach",
  "license": "MIT"
}

4. Install components, starting with gulp. npm install --save-dev gulp

5. Base SASS items npm install --save-dev gulp-sass gulp-cssnano gulp-sourcemaps gulp-autoprefixer

6. Verify package.json

"devDependencies": {
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-cssnano": "^2.1.1",
"gulp-sass": "^2.2.0",
"gulp-sourcemaps": "^1.6.0"
}

7. Next time, you just have to add to the package.json file the stuff you need, then run npm install

8. Also to update packages, input the new version in package.json file, and run npm install

9. Set up gulpfile.js

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var cssnano = require('gulp-cssnano');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('workflow', function () {
	gulp.src('./src/sass/**/*.scss')
		.pipe(sourcemaps.init())
		.pipe(sass().on('error', sass.logError))
		.pipe(autoprefixer({
			browsers: ['last 2 versions'],
			cascade: false
		}))
		.pipe(cssnano())
		.pipe(sourcemaps.write('./'))

	.pipe(gulp.dest('./dist/css/'))
});

gulp.task('default', function () {
	gulp.watch('./src/sass/**/*.scss', ['workflow']);
});