creating gulp-seed

README.md

Setup

• create a folder for your seed, e.g. es6-sass-seed
• install Gulp-js: npm install -g gulp
• initialize npm: npm init
• save Gulp as a dependency for your project
  • npm install --save-dev gulp or npm install -D gulp
• create a gulpfile.js at the root of your project directory
• gulpfile.js should look like this, ex:

var gulp = require('gulp');

gulp.task('default', function() {
  
});

Add Babel for es6 goodies

• create a folder named src at the root of you project directory
• create a file named test.js and declare a ES6 class ex:

class TestClass {
  constructor(name) {
    this.name = name;
  }
}

• gulpfile.js should now look like ex:

var gulp = require('gulp');
var babel = require('gulp-babel');

// es6 task
gulp.task('default', function() {
  return gulp.src('src/test.js')
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(gulp.dest('dist'));
});

• test your task with the command gulp in your command-line

Add gulp-sass

• create a folder for your precompiled sass code, e.g. scss folder.
• create a file the folder you just created called styles.scss
• add some sass code to it, ex:

$colorVariable: #333;

body {
  h1 {
    background-color: $colorVariable;
  }
}

• create a new folder where your compiled stylesheets will go e.g. public/css folder.
• follow directions at https://www.npmjs.com/package/gulp-sass
• require the module you want to use (in this case gulp-sass) in your gulpfile.js
• Create a new gulp task, ex:

gulp.task('sass', function () {
  return gulp.src('./scss/styles.scss') // the source of PRECOMPILED files
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('public/css')); // the destination of COMPILED files
});

• test your task with the command: gulp sass