前端内容的自动化构建

前端内容的自动化构建

Gulp - 基于流的自动化构建工具

Browserify

官网

Github

一个管理前端依赖的工具，可以实现JS的模块化加载。

node.js的CommonJS模块规范，使用module.exports来定义JS模块，使用require语句来加载JS模块。

browserify main.js -o bundle.js
<script src="bundle.js"></script>

watchify

Github

browserify-shim

Github

Gulp

【调用shell执行】

var gulp = require('gulp')
var shelljs = require('shelljs');
var fs = require('fs');
gulp.task('default', function() {
  // 将你的默认的任务代码放在这
  // console.log('this is default task');
  shelljs.exec('browserify main.js -o bundle.js');
});

【使用browserify】

var gulp = require('gulp');
var browserify = require('browserify');
var fs = require('fs');
gulp.task('default', function() {
  // 将你的默认的任务代码放在这
  browserify().add('main.js').bundle().pipe(fs.createWriteStream('bundle.js'));
});

【watch】

var gulp = require('gulp');
var browserify = require('browserify');
var fs = require('fs');
var sequence = require('run-sequence');
gulp.task('default', function() {
  sequence('main', 'watch');
});
gulp.task('main', function() {
  browserify().add('assets/js/main.js').bundle().pipe(fs.createWriteStream('bundle.js'));
});
gulp.task('watch', function() {
  gulp.watch(['assets/js/*.js'], function() {
    sequence('main');
  })
});

【watchify 插件】

var gulp = require('gulp');
var browserify = require('browserify');
var watchify = require('watchify');
var fs = require('fs');


gulp.task('default', function() {
  var b = browserify({
    entries: ['assets/js/main.js'],
    cache: {},
    packageCache: {},
    plugin: [watchify]
  });

  function bundle() {
    b.bundle().pipe(fs.createWriteStream('bundle.js'));
  }
  bundle();
  b.on('update', bundle);
});