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']);
巴特西

Gulp browserify livereload

Gulp browserify livereload

最新文章

热门文章
