@拭目以待：首發(fā)于webpack+gulp 構(gòu)建react項(xiàng)目

背景

GirdManager首頁，使用 React 實(shí)現(xiàn)。

需要實(shí)現(xiàn)功能

1. jsx 轉(zhuǎn)換為 js
2. es6 轉(zhuǎn)換為 es5
3. 對文件進(jìn)行合并、壓縮
4. 生成可供發(fā)布的zip包
5. 單個頁面只引入當(dāng)前使用到的資源文件

為什么要將 webpack gulp 配合使用

webpack 在使用過程中， 并不能很好的解決文件相關(guān)的操作。所以采用 gulp 進(jìn)行配合。

webpack 與 gulp 各自實(shí)現(xiàn)的功能如下:

webpack

1. jsx transform js
2. es6 transform es5

gulp

1. 文件操作
2. 壓縮html css js
3. 生成發(fā)布所需zip包

實(shí)現(xiàn)源碼

gulpfile.js

/*
* 文件操作
* 壓縮html css
* 對js相關(guān)的操作使用webpack
* */
const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const minifyCss = require('gulp-minify-css');
const uglify = require('gulp-uglify');
const gulpIf = require('gulp-if');
const gulpUtil = require('gulp-util');
const zip = require('gulp-zip');
const del = require('del');
var miniHtmlOptions = {
    removeComments: true,  //清除HTML注釋
    collapseWhitespace: true,  //壓縮HTML
    collapseBooleanAttributes: false,  //省略布爾屬性的值 <input checked="true"/> ==> <input checked />
    removeEmptyAttributes: true,  //刪除所有空格作屬性值 <input id="" /> ==> <input />
    removeScriptTypeAttributes: true,  //刪除<script>的type="text/javascript"
    removeStyleLinkTypeAttributes: true,  //刪除<style>和<link>的type="text/css"
    minifyJS: true,  //壓縮頁面JS
    minifyCSS: true  //壓縮頁面CSS
};
// 構(gòu)建項(xiàng)目目錄
var buildPath = 'GridManager';
// 打包后的名稱
var zipName = 'GridManagerSite.zip';
var webpack = require('webpack');
var webpackConfig = require('./webpack.config.js');
// 默認(rèn)執(zhí)行
gulp.task('default', ['develop']);
// 構(gòu)建開發(fā)包
gulp.task('develop', ['webpack:build']);
// 構(gòu)建上線包
gulp.task('production', ['uglify'], function(){
    // gulp.start('uglify');
});
// 構(gòu)造前: 刪除原有構(gòu)建包
gulp.task('clean', function() {
    del.sync([buildPath + '/*']);
});
// 構(gòu)造前: 先刪除之前的.zip
gulp.task('cleanzip', function(){
    del.sync(zipName);
});
// 移動文件,除jsx以外
gulp.task('movefile', ['clean', 'cleanzip'], function () {
    return gulp.src(['src/*app*/*/*', 'src/*assets*/*/*', 'src/index.html', '!src/**/*.js*'])
        .pipe(gulp.dest(buildPath));
});
// 壓縮
gulp.task('uglify', ['webpack:build'], function(){
    return gulp.src([buildPath + '/**/*'])
        .pipe(gulpIf('*.html', htmlmin(miniHtmlOptions).on('error', gulpUtil.log)))
        .pipe(gulpIf('*.js', uglify().on('error', gulpUtil.log)))
        .pipe(gulpIf('*.css', minifyCss()))
        .pipe(gulp.dest(buildPath));
});
// 使用webpack 對jsx進(jìn)行處理
gulp.task('webpack:build', ['movefile'], function(callback) {
    // modify some webpack config options
    var myConfig = Object.create(webpackConfig);
    // run webpack
    webpack(myConfig, function(err, stats) {
        if(err) throw new gutil.PluginError('webpack:build', err);
        gulpUtil.log('[webpack:build]', stats.toString({
            colors: true
        }));
        callback();
    });
});
//打包為GridManagerSite.zip
gulp.task('GridManagerSite', function() {
    console.log('GridManagerSite');
    return gulp.src([buildPath + '/**/*.*'])
        .pipe(zip(zipName))
        .pipe(gulp.dest(''));
});
/**
 * 命令所對應(yīng)功能:
 * gulp: 構(gòu)建未壓縮的項(xiàng)目
 * gulp develop: 構(gòu)建未壓縮的項(xiàng)目
 * gulp production: 構(gòu)建壓縮的項(xiàng)目, 并生成zip包
 * */

webpack.config.js

/*
* webpack只對js進(jìn)行控制
* jsx transform js
* es6 transform es5
* 注意:
* html,css 及打包壓縮等使用gulp實(shí)現(xiàn)
* */
var webpack = require('webpack');
var path = require('path');
var buildPath = 'GridManager';
module.exports = {
    entry: {
        'index': ['./src/app/model.js', './src/app/index.jsx'],
        'about': './src/app/about/index.jsx',
        'api': './src/app/api/index.jsx',
        'demo': ['./src/app/demo/model.js', './src/app/demo/index.jsx'],
        'faq': './src/app/faq/index.jsx',
        'version': './src/app/version/index.jsx',
        'common': ['./src/common/header.jsx', './src/common/footer.jsx', './src/common/tool.js']
    },
    output: {
        path: path.join(__dirname, buildPath),
        filename: '[name].build.js',
        publicPath: '/' + buildPath + ''
    },
    module: {
        loaders: [
            {
                test: /.js?$/,
                loaders: ['babel?{"presets":["es2015"]}'],
                exclude: /(node_modules|bower_components)/,
                include: [path.join(__dirname, 'src')]
            },
            {
                test: /.jsx$/,
                loader: 'babel-loader!jsx-loader?harmony'
            },
            {
                test: /.html$/,
                loader: 'file?name=[path][name]-[hash:20].[ext]',
                exclude: [/(node_modules|bower_components)/],
                include: [path.join(__dirname, 'src/app')]
            }
        ]
    }
};

注意事項(xiàng)

1.在 gulpfile.js 中調(diào)用 webpack

gulp.task('webpack:build', function(callback) {
    // webpackConfig 為 webpack.config.js 中的內(nèi)容
    var myConfig = Object.create(webpackConfig);
    // run webpack
    webpack(myConfig, function(err, stats) {
        if(err) throw new gutil.PluginError('webpack:build', err);
        gulpUtil.log('[webpack:build]', stats.toString({
            colors: true
        }));
        callback();
    });
});

2.存在js的壓縮時， 必須在壓縮前先執(zhí)行 webpack 。以保證在執(zhí)行壓縮時， 已經(jīng)將全部的 jsx 轉(zhuǎn)換為 js

gulp.task('uglify', ['webpack:build'], function(){
    return gulp.src([buildPath + '/**/*'])
        .pipe(gulpIf('*.html', htmlmin(miniHtmlOptions).on('error', gulpUtil.log)))
        .pipe(gulpIf('*.js', uglify().on('error', gulpUtil.log)))
        .pipe(gulpIf('*.css', minifyCss()))
        .pipe(gulp.dest(buildPath));
});

@拭目以待

個人站點(diǎn)：www.lovejavascript.com
表格管理插件:gridmanager.lovejavascript.com && github地址
QQ交流群 (452781895)：How To Make Love
微信公眾賬號：loveJavascript

《野生前端工程師》專輯中所有文章均為@拭目以待 原創(chuàng)，轉(zhuǎn)載請注明出處。