andrewdc
4/14/2014 - 3:39 PM

Simple Static Site Generator with Gulp

Simple Static Site Generator with Gulp

var gulp = require('gulp'),
    gutil = require('gulp-util'),
    sass = require('gulp-sass'),
    rubysass = require('gulp-ruby-sass'),
    fileinclude = require('gulp-file-include'),
    rename = require('gulp-rename'),
    notify = require('gulp-notify'),
    livereload = require('gulp-livereload'),
    lr = require('tiny-lr'),
    connect = require('gulp-connect'),
    plumber = require('gulp-plumber'),
    autoprefixer = require('gulp-autoprefixer'),
    server = lr(),
    path = require("path");

var paths = {
  templates: './templates/',
  sass: 'css/source/'
};

// fileinclude: grab partials from templates and render out html files
// ==========================================
gulp.task('fileinclude', function() {
  return  gulp.src(path.join(paths.templates, '*.tpl.html'))
    .pipe(fileinclude())
    .pipe(rename({
      extname: ""
     }))
    .pipe(rename({
      extname: ".html"
     }))
    .pipe(gulp.dest('./'))
    .pipe(livereload(server))
    .pipe(notify({ message: 'Includes: included' }));
});

//  Sass: compile sass to css task - uses Libsass
//===========================================
gulp.task('sass', function() {
  return gulp.src(path.join(paths.sass, '*.scss'))
    .pipe(sass({ style: 'expanded', sourceComments: 'map', errLogToConsole: true}))
    .pipe(autoprefixer('last 2 version', "> 1%", 'ie 8', 'ie 9'))
    .pipe(gulp.dest('css'))
    .pipe(livereload(server))
    .pipe(notify({ message: 'LibSass files dropped!' }));
});

//  Sass: compile sass to css task
//===========================================
gulp.task('rubysass', function() {
  return gulp.src(path.join(paths.sass, '*.scss'))
    .pipe(plumber())
    .pipe(rubysass({ sourcemap: true, style: 'expanded'}))
    .pipe(autoprefixer('last 2 version', "> 1%", 'ie 8', 'ie 9'))
    .pipe(gulp.dest('css'))
    .pipe(livereload(server))
    .pipe(notify({ message: 'Ruby Sass files dropped!' }));
});


//  Connect: sever task
//===========================================
gulp.task('connect', connect.server({
  port: 1337,
  root: [__dirname],
  livereload: false
}));

function watchStuff(task) {
  // Listen on port 35729
  server.listen(35729, function (err) {
    if (err) {
      return console.error(err) 
      //TODO use notify to log a message on Sass compile fail and Beep
    };

    //Watch task for sass
    gulp.watch(path.join(paths.sass, '**/*.scss'), [task]);

    // watch task for gulp-includes
    gulp.watch(path.join(paths.templates, '**/*.html'), ['fileinclude']);

  });
}

//  Watch and Livereload using Libsass
//===========================================
gulp.task('watch', function() {

 watchStuff('sass');

});

//  Watch and Livereload using RUBY Sass
//===========================================
gulp.task('rubywatch', function() {

 watchStuff('rubysass');

});


//  Default Gulp Task
//===========================================
gulp.task('default', ['fileinclude', 'sass', 'connect', 'watch'], function() {

});

gulp.task('useruby', ['fileinclude', 'rubysass', 'connect', 'rubywatch'], function() {

});