gulpfile.js : development server & dest server example

gulpfile.js

'use strict';

var gulp        = require( 'gulp' ),
    server      = require( 'gulp-develop-server' ),
    prefix      = require( 'gulp-autoprefixer' ),
    sass        = require( 'gulp-ruby-sass' ),
    cssmin      = require( 'gulp-minify-css' ),
    uglify      = require( 'gulp-uglify' ),
    imagemin    = require( 'gulp-imagemin' ),
    sourcemaps  = require( 'gulp-sourcemaps' ),
    transform   = require( 'vinyl-transform' ),
    browserify  = require( 'browserify' ),
    del         = require( 'del' ),
    chalk       = require( 'chalk' ),
    browserSync = require( 'browser-sync' ),
    reload      = browserSync.reload;


// ===========================
//
//       Error Handler
//
// ===========================

function errorHandler( error ) {
    if( typeof error === 'object' && error.message ) {
        error = error.message;
    }
    console.error( chalk.red( '[gulp] ' ) + chalk.red( error ) );
}


// ===========================
//
//          Settings
//
// ===========================

var src = {
    server: [
        './app.js',
        './app-config.js',
        './commons/*.js',
        './api/*.js',
        './libs/*.js',
        './models/*.js',
        './routes/*.js'
    ],
    images: [
        './public/dev/images/**/*.{png,jpg,jpeg,gif,svg,ico}',
    ],
    main: [
        './client/scripts/main.js',
    ],
    scripts: [
        './client/scripts/**/*.js',
        './commons/*.js',
        './templates/*.jade',
    ],
    styleDir: './client/styles/',
    styles: [
        './client/styles/**/*.{scss,sass}',
    ],
    files: [
        './public/dev/*.{txt,html}',
        './views/**/*.jade',
    ],
    rootFiles: [
        './public/dev/*.{txt,html}'
    ]
};

var dev = {
    scripts: './public/dev/scripts',
    styles:  './public/dev/styles',
};

var dest = {
    images:  './public/dist/images',
    scripts: './public/dist/scripts',
    styles:  './public/dist/styles',
    root:    './public/dist'
};

var opt = {
    server: {
        path: './app.js'
    },
    imagemin: {
        svgoPlugins: [
        ]
    },
    uglify: {
        preserveComments: 'some'
    },
    browserSync: {
        proxy: 'http://localhost:3000',
        host: 'localhost',
        port: 4000,
        open: false,
        ui: {
            port: 4001
        }
    },
    reload: {
        stream: true
    },
    sourcemaps: {
        loadMaps: true
    },
    sass: {
        sourcemap: true
    }
};


// ===========================
//
//        Development
//
// ===========================

// Server
gulp.task( 'server:start', function() {
    server.listen( opt.server, function( error ) {
        if( ! error ) browserSync( opt.browserSync );
    });
});

gulp.task( 'server:restart', function() {
    server.restart( function( error ) {
        if( ! error ) reload();
    });
});


// Browser
gulp.task( 'reload', function() {
    reload();
});


// Watch
gulp.task( 'watch', [ 'server:start' ], function() {
    gulp.watch( src.server, [ 'server:restart' ] );
    gulp.watch( src.files, [ 'reload' ] );
    gulp.watch( src.styles, [ 'styles' ] );
    gulp.watch( src.scripts, [ 'scripts' ] );
});


// Styles
gulp.task( 'styles', function() {
    sass( src.styleDir, opt.sass )
        .on( 'error', errorHandler )
        .pipe( prefix() )
        .pipe( sourcemaps.write() )
        .pipe( gulp.dest( dev.styles ) )
        .pipe( reload( opt.reload ) );
});


// Scripts
gulp.task( 'scripts', function() {
    var browserified = transform( function( filename ) {
        var bundler = browserify({
            entries: filename,
            debug: true
        });
        return bundler.bundle();
    });

    gulp.src( src.main )
        .pipe( browserified )
        .on( 'error', errorHandler )
        .pipe( sourcemaps.init( opt.sourcemaps ) )
        .pipe( sourcemaps.write() )
        .pipe( gulp.dest( dev.scripts ) )
        .pipe( reload( opt.reload ) );
});



// ===========================
//
//          Build
//
// ===========================

gulp.task( 'build:styles', function() {
    sass( src.styleDir )
        .pipe( prefix() )
        .pipe( cssmin() )
        .pipe( gulp.dest( dev.styles ) );
});


gulp.task( 'build:scripts', function() {
    var browserified = transform( function( filename ) {
        var bundler = browserify({
            entries: filename
        });
        return bundler.bundle();
    });

    gulp.src( src.main )
        .pipe( browserified )
        .pipe( uglify( opt.uglify ) )
        .pipe( gulp.dest( dev.scripts ) );
});


gulp.task( 'build:image', [ 'clean:image' ], function() {
    gulp.src( src.images )
        .pipe( imagemin( opt.imagemin ) )
        .pipe( gulp.dest( dest.images ) );
});


gulp.task( 'clean:image', function( done ) {
    del( dest.images, done );
});


gulp.task( 'copy:files', function() {
    gulp.src( src.rootFiles )
        .pipe( gulp.dest( dest.root ) );
});


// ===========================
//
//          Tasks
//
// ===========================

gulp.task( 'default', [
    'watch',
    'styles',
    'scripts'
]);

gulp.task( 'build', [
    'build:image',
    'build:styles',
    'build:scripts',
    'copy:files'
]);

package.json

{
  "devDependencies": {
    "browser-sync": "^2.0.1",
    "browserify": "^9.0.3",
    "chalk": "^0.5.1",
    "del": "^1.1.1",
    "gulp": "^3.8.10",
    "gulp-autoprefixer": "^2.0.0",
    "gulp-develop-server": "^0.2.5",
    "gulp-imagemin": "^2.0.0",
    "gulp-minify-css": "^0.4.6",
    "gulp-ruby-sass": "^1.0.0-alpha",
    "gulp-sourcemaps": "^1.3.0",
    "gulp-uglify": "^1.0.1",
    "jadeify": "^4.0.0",
    "vinyl-transform": "^1.0.0"
  },
  "browserify": {
    "transform": [
      "jadeify"
    ]
  }
}