bifypack

gulpbrowserify

npm install -g bifypack

bifypackfile``js``gulp``gulpfile.js

bifypack``gulp

bifypack <task>

npm install bifypack --save-dev

package.json``script

"scripts": {
  "dev": "bifypack reload",
  "build": "bifypack rev"
}

npm run dev``npm run build

task

task

task

• eslint: eslint.eslintrchttp://eslint.org/docs/user-guide/configuring#using-configuration-files

• browserify: browserify taskbundlefactor-bundle

• watchify: watchifybrowserify

• clean: product

• cleanDev: dev

• html: html``dev``placeholderhtmlfactor-bundlehtml

• img: img``dev1.xgulp-imagemin2.x

• style: cssgulp-minify-css2.xplugins``dev``.maphtml<link rel="stylesheet">

• script: devhtml<script>

• copy: dev

task

• static: default``task``browserify, html, style, img, script, copytask

• watch: watchhtml, style, img, copy``watchify

• reload: watchtaskbrowser-sync

• rev: static``dev``devgulp-rev-allhashproduct

bifypack reloadhashproduct``bifypack rev

bifypackfile

bifypack

var path = require('path')

// 
var less = require('gulp-less')
var LessPluginCleanCSS = require('less-plugin-clean-css')
var htmlmin = require('gulp-htmlmin')
var imagemin = require('gulp-imagemin')
var cleanCSSPlugin = new LessPluginCleanCSS({
	advanced: true,
	compatibility: 'ie8'
})

var src = 'src/'
var dev = 'dev/' //  .gitignore
var product = 'dist/' //  .gitignore
var bundleMapFile = 'bifypack.bundleMap.json' //  .gitignore
var externals = {
	jquery: '$'
}
var sexts = ['gif', 'png', 'jpg', 'jpeg'].join(',')

var config = {
	src: src, //   src/
	dev: dev, //   dev/
	product: product, //   dist/
	bundleMapFile: bundleMapFile, // bifypack.bundleMap.jsonfactor-bundlehtml`<script>`

  browserSync: {
    //   { server: config.dev }
    //  https://browsersync.io/docs/options
    //  browsersync  2.15.0
    //   port proxy open 
    port: 3555, // 
    open: true, // 
    proxy: 'localhost/path/' // 
  },

	rev: {
		manifest: true, // product rev-manifest.json 
		//   
		dontRenameFile: [/\/index\.html$/ig, '.map', '.jpg', '.jpeg', '.png', '.gif'], // gulp-rev-all
		prefix: { // 
			'.js': 'http://sj.domain.com/',
			'.css': 'http://sc.domain.com/',
			'.{jpg,jpeg,png,gif}': 'http://si.domain.com/',
		}
		/**
		 * prefix 
		prefix: 'http://s.domain.com/'
		 */
	},
	script: { // js

		eslint: ['pages/**/*.js', 'common/**/*.js', 'components/**/*.js'], // 

		browserify: { // browserify

			src: ['pages/home/*.js'], //  factor-bundle 

			bundle: { // factor-bundle  apps/xx/common.js
			 	'apps/xx/common.js': 'apps/xx/*/*.js'
			},

			// 
			// 1. browserify.externalsexternalskey
			// 2. exposify transformexposeexternalsrequirekey
			//    `var $ = require('jquery')``var $ = (typeof window !== "undefined" ? window['$'] : typeof global !== "undefined" ? global['$'] : null)`
			externals: externals,

			/**pluginstransforms**/
			// https://www.npmjs.com/browse/keyword/browserify-plugin
			plugins: [ //  bundle-collapser
				'xx-plugin',
				// 
				{
					name: 'xx',
					options: {
						xxx: 'xxx'
					}
				}
			],

			// https://github.com/substack/node-browserify/wiki/list-of-transforms
			transforms: [ // transforms exposifytransform
				{
					name: 'node-lessify', // dolymood/node-lessifycssnode-lessify
					options: {
						root: path.join(process.cwd(), src), // dolymood/node-lessify
						prefix: '/' // dolymood/node-lessify
					}
				},
				'partialify' // partialify transformtransform cssify browserify-css 
			]

		},

		normal: { // script
			'lib/jquery.js': '!node_modules/jquery/dist/jquery.j', // !  !xx/*.js 
			'lib/jquery-ui.js': 'lib/jquery-ui/*.js',
			'*': 'lib/avalon/*.js' // key*
		}

	},

	placeholder: { // htmlscriptlinkjscss
		script: {
			// <!--SCRIPT_LIB_PLACEHOLDER-->  script
			'<!--SCRIPT_LIB_PLACEHOLDER-->': [
				'lib/jquery.js',
				'lib/jquery-ui.js',
				'lib/avalon.js',
				'lib/avalon.ui.js'
			]
		},
		style: {
			// <!--STYLE_COMMON_PLACEHOLDER-->  nlink
			'<!--STYLE_COMMON_PLACEHOLDER-->': [
				'lib/**/*.css',
				'common/common.css'
			]
		}
	},
  copy: ['font/*.*'],

  // 
  // 2.x 
  //  html style img  {src: ['xx'], plugins: []}
  //  1.x 
  // html: ['**/*.html']
  //  style  img 
  // style: ['common/css/g.css']
  // img: ['components/**/*.{' + exts + '}']
  html: {
		src: ['**/*.html'], // html tasks
		plugins: [
			function (styleConfig, config, utils) {
				return htmlmin({
					collapseWhitespace: true
				})
			}
		]
	},
	style: {
		src: [
			'common/css/g.less',
			'app/**/*.less'
		],
		plugins: [
			function (styleConfig, config, utils) {
				return less({
					plugins: [cleanCSSPlugin]
				})
			}
		]
	},
	img: {
		src: [
			'components/**/*.{' + exts + '}',
			'app/**/*.{' + exts + '}'
		],
		plugins: [
			function (imgConfig, config, utils) {
				return imagemin()
			}
		]
	}
}

module.exports = config

task

1. bifypack``npm link bifypack

2. task

// taskstask
var marked = require('gulp-marked')
var bifypack = require('bifypack')
var gulp = bifypack.gulp
var utils = bifypack.utils
gulp.task('marked', ['static'], function () {
	return gulp.src(utils.getSrc(bifypack.config.marked))
		.pipe(marked())
		.pipe(gulp.dest(bifypack.config.dev))
})

bifypack marked -e tasks``tasks

package.json``script

"scripts": {
  /** script **/
  "marked": "bifypack marked -e tasks"
}