Gulp browserify livereload

Gulp browserify livereload

之前在browserify那个博文中介绍了gulp + browserify

不过那个配置还不能满足日常需要

搬运

https://github.com/Hyra/angular-gulp-browserify-livereload-boilerplate/blob/master/Gulpfile.js#L67

'use strict';

var gulp = require('gulp'),
    jshint = require('gulp-jshint'),
    browserify = require('gulp-browserify'),
    concat = require('gulp-concat'),
    rimraf = require('gulp-rimraf'),
    sourcemaps = require('gulp-sourcemaps'),
    sass = require('gulp-sass'),//之前要安装node-sass
    rsass = require('gulp-ruby-sass'), //之后还是建议安装这个  体积小 安装出错几率小
    minifycss = require('gulp-minify-css'),
    autoprefixer = require('gulp-autoprefixer');

// Modules for webserver and livereload
var express = require('express'),
    refresh = require('gulp-livereload'),
    livereload = require('connect-livereload'),
    livereloadport = 35729,
    serverport = 5000;

// Set up an express server (not starting it yet)
var server = express();
// Add live reload
server.use(livereload({port: livereloadport}));
// Use our 'dist' folder as rootfolder
server.use(express.static('./dist'));
// Because I like HTML5 pushstate .. this redirects everything back to our index.html
server.all('/*', function(req, res) {
  res.sendfile('index.html', { root: 'dist' });
});

// Dev task
gulp.task('dev', [ 'views', 'rstyles', 'lint', 'browserify'], function() { });

// Clean task
gulp.task('clean', function() {
    gulp.src('./dist/views', { read: false }) // much faster
  .pipe(rimraf({force: true}));
});

// JSHint task
gulp.task('lint', function() {
  gulp.src('app/scripts/*.js')
  .pipe(jshint())
  .pipe(jshint.reporter('default'));
});

// Styles task
gulp.task('styles', function() {
  gulp.src('app/styles/main.scss')
  .pipe(sourcemaps.init())
  .pipe(sass())
  .pipe(autoprefixer('last 4 versions', '> 1%', 'ie 8'))
  .pipe(sourcemaps.write('./maps'))
  .pipe(gulp.dest('dist/css/'));

  //copy img and font
  gulp.src('app/styles/imgs/*.*')
  .pipe(gulp.dest('dist/css/imgs'));
  gulp.src('app/styles/fonts/*.*')
  .pipe(gulp.dest('dist/css/fonts'));
});

gulp.task('rstyles', function() {

  rsass('app/styles/main.scss',{ sourcemap: true })
    .on('error', sass.logError)
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(minifycss())

    // For inline sourcemaps
    .pipe(sourcemaps.write())

    // For file sourcemaps
    .pipe(sourcemaps.write('maps', {
      includeContent: false,
      sourceRoot: 'app/styles'
    }))

    .pipe(gulp.dest('dist/css'));

    //copy img and font
    gulp.src('app/styles/imgs/*.*')
    .pipe(gulp.dest('dist/css/imgs'));
    gulp.src('app/styles/fonts/*.*')
    .pipe(gulp.dest('dist/css/fonts'));
});

// Browserify task
gulp.task('browserify', function() {
  // Single point of entry (make sure not to src ALL your files, browserify will figure it out)
  gulp.src(['app/scripts/main.js'])
  .pipe(browserify({
    insertGlobals: true,
    debug: true
  }))
  // Bundle to a single file
  .pipe(concat('compiled.js'))
  // Output it to our dist folder
  .pipe(gulp.dest('dist/js/'));
});

// Views task
gulp.task('views', function() {
  // Get our index.html
  gulp.src('app/index.html')
  // And put it in the dist folder
  .pipe(gulp.dest('dist/'));

  // Any other view files from app/views
  gulp.src('app/views/*')
  // Will be put in the dist/views folder
  .pipe(gulp.dest('dist/views'));
});

// Task with deps
// deps
// Type: Array
// An array of tasks to be executed and completed before your task will run.

gulp.task('watch', ['lint'], function() {
  // Start webserver
  server.listen(serverport);
  // Start live reload
  refresh.listen(livereloadport);

  // Watch our scripts, and when they change run lint and browserify
  //任意目录下的js  'app/scripts/**/*.js'
  gulp.watch(['app/scripts/*.js'],[
    'lint',
    'browserify'
  ]);
  // Watch our sass files
  gulp.watch(['app/styles/*.scss','app/styles/**/*'], [
    'rstyles'
  ]);

  gulp.watch(['app/**/*.html'], [
    'views'
  ]);

  gulp.watch('./dist/**').on('change', refresh.changed);

});

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