gulp + webpack

gulpfile.js

var batch = require('gulp-batch');
var gulp = require('gulp');

function getPackageJson() {
    var fs = require('fs');
    return JSON.parse(fs.readFileSync('./package.json', 'utf8'));
};

gulp.task('bump', function(cb) {
    var tag = require('minimist')(process.argv.slice(2)).tag || 'patch';
    if ('major|minor|patch|prerelease'.split('|').indexOf(tag) == -1) {
        return cb("Usage: gulp bump --tag major|minor|patch|prerelease")
    }
    return gulp.src('./package.json').pipe(require('gulp-bump')({
        type: tag
    })).pipe(gulp.dest('./'));
});

// 只有当源码发生改变时 assets/script.js 中才会出现 @version.
gulp.task('release', ['bump'], function(cb) {

    var replace = require('gulp-replace');
    var gzip = require('gulp-gzip');
    var version = getPackageJson().version;

    return gulp.src('./www/assets/script.js')
        .pipe(replace('"@version"', '"' + version + '"'))
        .pipe(gulp.dest('./www/assets/')).on('end', function() {

            gulp.src(['./www/assets/**/*.js'])
                .pipe(gzip()).pipe(gulp.dest('./www/assets/'))
        })
});

gulp.task('watch', function() {
    var webpack = require('webpack-stream'),
        minify = require('gulp-minify-html'),
        watch = require('gulp-watch'),
        path = require('path');

    // public config.module.loaders
    var loaders = [{
            test: /\.less$/,
            loader: 'style-loader!css-loader!less-loader'
        }, {
            test: /\.css$/,
            loader: 'style-loader!css-loader'
        }, {
            test: /\.(png|jpg)$/,
            loader: 'url-loader?limit=8192'
        }],
        minijs = [
            new webpack.webpack.optimize.UglifyJsPlugin({
                compress: {
                    warnings: false
                }
            })
        ],
        src = path.resolve(__dirname, "src"),
        dist = path.resolve(__dirname, "www");

    watch(["src/*.html"], batch(function(events, done) {
        return events.pipe(
                minify({
                    collapseWhitespace: true
                })
            ).pipe(gulp.dest(dist))
            .on('end', done);
    }))

    watch(["src/script.js", "src/app.js"], batch(function(events, done) {
        return gulp.src("src/script.js")
            .pipe(webpack({
                context: src,
                entry: "./script.js",
                output: {
                    path: dist,
                    filename: "assets/script.js"
                },
                module: {
                    loaders: loaders
                },
                plugins: minijs
            })).pipe(gulp.dest('www'))
            .on('end', done);
    }))

    watch("src/vendor.js", batch(function(events, done) {
        return gulp.src("src/vendor.js").pipe(webpack({
                context: src,
                entry: "./vendor.js",
                output: {
                    path: dist,
                    filename: "assets/vendor.js"
                },
                module: {
                    loaders: loaders
                },
                plugins: minijs
            })).pipe(gulp.dest('www'))
            .on('end', done);
    }))

})

gulp.task('default', ['watch'], function() {
    var connect = require('gulp-connect');
    gulp.watch(['www/**'], batch(function(events, done) {
        return events.pipe(connect.reload()).on('end', done);
    }));

    connect.server({
        root: ['www'],
        host: '0.0.0.0',
        port: 3282,
        livereload: true
    })
});

目录结构示例, src 为源码目录, www 为发布目录.

1. 源码目录下是需要 webpack 或者处理的文件, 比如 index.html 需要 minify.
2. 发布目录下是 webpack或者 minify 的结果, 还有不需要要处理的文件, 比如静态图片

├── gulpfile.js
├── src 
│   ├── index.html
│   ├── script.js
│   └── vendor.js
└── www
    ├── assets
    │   ├── script.js
    │   └── vendor.js
    └── index.html

npm install --save-dev css-loader file-loader gulp gulp-batch gulp-bump gulp-connect gulp-minify-html gulp-replace gulp-watch gulp-zip style-loader url-loader webpack-stream