gulpfile.js

gistfile1.js

/* global requires */
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var sass = require('gulp-ruby-sass');
var prefix = require('gulp-autoprefixer');
var browserify = require('gulp-browserify');
var browserSync = require('browser-sync');
var reload = browserSync.reload;

var iconfont = require('gulp-iconfont');
var consolidate = require('gulp-consolidate');


// File sources
// aka APP entry points 
var sources = {
  sass: './client_app/app.sass',
  js: './client_app/app.js',
  html: './client_app/*.html' // dont't know why I cant specify a actual file... to CHECK one day
};

// Build destination
var destinations = {
  css: './static/css',
  js: './static/js',
  html: './static'
};

// watched files for live-reload
var watched =  {
  css: ['./client_app/*.sass', './client_app/**/*.sass'],
  js: ['./client_app/app.js', './client_app/**/*.js'],
  html: './client_app/*.html'
};
 
// Tasks
// * build JavaScript (browserify)
// * build sass
// * copy HTML files
// * build web-starter-kit scss components

var tasks = {

  // --------------------------
  // this task only compiles the entry point `sources.js`
  // all dependencies need to be included(required) there no magic sauce appening... only only one file to rule them all
  // --------------------------
  js: function () {
    gulp.src(sources.js)
      .pipe($.browserify({
        transform: ['node-underscorify'], // this transform is to use _ template engine...
        extensions: ['ejs', 'html'],
        debug : true //TODO: !gutil.env.production
      }))
      .pipe(gulp.dest(destinations.js))
      .pipe($.if(browserSync.active, reload({stream:true, once: true})))
      .pipe($.size({title: 'js'}));
  },

  // --------------------------
  // this task only compiles the entry point `sources.sass`
  // all dependencies need to be included(required) there no magic sauce appening only one file to rule them all
  // --------------------------
  sass: function() {
    gulp.src(sources.sass)
      .pipe(sass({style: 'expanded', noCache: true}))
      .on('error', function(error){
        console.log(error.message);
      })
      .on('end', function(){
        // console.log('Compiled sass');
      })
      .pipe(prefix("last 2 Chrome versions", "last 2 Firefox versions", "last 2 Safari versions", "ie >= 8"))
      .on('end', function(){
        // console.log('Prefixed css');
      })
      .pipe(gulp.dest(destinations.css))
      .pipe($.if(browserSync.active, reload({stream:true, once: true})))
      .pipe($.size({title: 'sass'}));
  },
  
  //---------------------------
  // justo copy the html
  //---------------------------
  html: function () {
    return gulp.src(sources.html)
      .pipe(gulp.dest(destinations.html))
      .pipe($.if(browserSync.active, reload({stream:true, once: true})))
      .pipe($.size({title: 'html'}));
  },

  //TODO: copy all assets from folder assets to static 
  

  // --------------------------
  // this task only compiles the google web kit scss components... maybe take it out... or put other mixins...
  // --------------------------
  components: function () {
    gulp.src('./assets/css/components/components.scss')
      .pipe(sass({style: 'expanded', noCache: true}))
      .on('error', function(error){
        console.log(error.message);
      })
      .on('end', function(){
        //console.log('Compiled sass');
      })
      .pipe(prefix("last 2 Chrome versions", "last 2 Firefox versions", "last 2 Safari versions", "ie >= 8"))
      .on('end', function(){
        //console.log('Prefixed css');
      })
      .pipe(gulp.dest('./static/css'))
      .pipe($.size({title: 'components'}));
  },

  Iconfont: function(){
    gulp.src(['assets/icons/*.svg'])
      .pipe(iconfont({ fontName: 'myfont' }))
      .on('codepoints', function(codepoints, options) {
        gulp.src('gulp_templates/icon_font.css')
          .pipe(consolidate('lodash', {
            glyphs: codepoints,
            fontName: 'myfont',
            fontPath: '../images/icons/',
            className: 's'
          }))
          .pipe(gulp.dest('static/css/'));
      })
      .pipe(gulp.dest('static/images/icons'));
  }
};
 
// --------------------------
// Register our tasks
// --------------------------
// default
gulp.task('default', function() {
  //gulp.run('lint:js', 'build:js', 'copy:static');
});

// gulp task setup
gulp.task('js', tasks.js);
gulp.task('components', tasks.components);
gulp.task('sass', tasks.sass);
gulp.task('html', tasks.html);
gulp.task('Iconfont', tasks.Iconfont);


gulp.task('watch', function(){
  browserSync({
    notify: true,
    server: {
      baseDir: './static'
    }
  });
  gulp.watch(watched.html, ['html'], reload);
  gulp.watch(watched.js, ['js'], reload);
  gulp.watch(watched.css, ['sass'], reload);
});