zeshanshani
10/28/2015 - 1:18 AM

Gulp Workflow - Sass, Uglify, Express, Copy, Bourbon, Neat, BrowserSync

Gulp Workflow - Sass, Uglify, Express, Copy, Bourbon, Neat, BrowserSync

{
  "name": "",
  "version": "0.1.0",
  "description": "",
  "main": "",
  "dependencies": {},
  "devDependencies": {
    "body-parser": "^1.7.0",
    "express": "^4.8.8",
    "gulp": "^3.8.7",
    "gulp-concat": "^2.3.4",
    "gulp-connect": "^2.0.6",
    "gulp-livereload": "^2.1.1",
    "gulp-sass": "^0.7.3",
    "gulp-uglify": "^1.0.1",
    "gulp-header": "latest",
    "gulp-filter": "latest",
    "gulp-util": "^3.0.1",
    "node-bourbon": "^1.2.3",
    "node-neat": "^1.3.0",
    "tiny-lr": "^0.1.1",
    "browser-sync": ""
  },
  "scripts": {
    "start": "gulp"
  }
}
var gulp = require('gulp'),
    gutil = require('gulp-util'),
    uglify = require('gulp-uglify'),
    header = require('gulp-header'),
    filter = require('gulp-filter'),
    concat = require('gulp-concat'),
    browserSync = require('browser-sync'),
    sass = require('gulp-sass'),
    bodyParser = require('body-parser'),
    express = require('express'),
    livereload = require('gulp-livereload'),
    lr = require('tiny-lr')
    server = lr();

var jsSrc = [
        'src/js/*.js'
    ],
    sassSrc = [
        'src/styles/sass/*.scss'
    ];
    
// Static server
gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: "./"
        }
    });
});


gulp.task('js', function () {
    gulp.src(jsSrc)
        .pipe(uglify())
        .pipe(concat('output.min.js'))
        .pipe(gulp.dest('dist/js'));
});

gulp.task('sass', function () {
    gulp.src(sassSrc)
        .pipe(sass({
            style: 'expanded',
            lineNumbers: true,
            sourcemap: false,
            includePaths: [require('node-neat').includePaths, require('node-bourbon').includePaths]
        }))
        .pipe(concat('style.css'))
        .pipe(gulp.dest('dist/css'))
        .pipe(livereload());
});

gulp.task('copy', function () {
    gulp.src('./src/assets/**/*')
        .pipe(gulp.dest('dist/assets'));
});

gulp.task('server', function () {
    app = express();
    app.use(bodyParser.urlencoded({
        extended: true
    }));
    app.use(bodyParser.json());
    app.use(express.static(__dirname));
    app.listen(4000);
});

// Watches
gulp.task('watch', function () {
    var server = livereload();
    gulp.watch(jsSrc, ['js']);
    gulp.watch(coffeeSrc, ['coffee']);
    gulp.watch(sassSrc, ['sass']);
    gulp.watch(['dist/js/*.js', 'dist/css/*.css', '*.html'], function (e) {
        server.changed(e.path);
    });
});

gulp.task('default', [
    'server',
    'copy',
    'sass',
    'js',
    'watch'
]);