前端工程构建gulp、babel、webpack简介

gulp

• 基于文件流的形式来处理
• 常用的API有.src、.task、.dest 和CLI命令行工具

glop语法

• *匹配任意个字符
• ?匹配一个字符
• [...]匹配范围内字符
• !(pattern1|pattern2)匹配取反
• ?(pattern1|pattern2)匹配0或1个
• +(pattern1|pattern2)匹配1或多个
• *（a|b|c)匹配任意个
• @(pattern|pat*|pat?erN)匹配特定的一个
• **任意层级匹配

（配置gulpfile.js）例子如下：

const gulp = require('gulp')
const less = require('gulp-less')
const del = require('del')//npm del
/*
通过构建工具可以轻松的实现自动匹配各种浏览器的样式
*/
//can i use https://caniuse.com/
const autoprefixer = require('gulp-autoprefixer')
//browserslist https://github.com/ai/browserslist
const cleanCSS = require('gulp-clean-css')
//gulp-clean-css 压缩css

gulp.task('clean', () => {
    del.sync('build')
})
gulp.task('less', () => {
    gulp.src('src/**/*.less')
        .pipe(less())
        .pipe(autoprefixer({
            browsers: ['last 5 version', 'Firefox > 20'],
            cascade: false
        }))
        .pipe(cleanCSS())
        .pipe(gulp.dest('build'))
})
gulp.task('default', ['clean', 'less'], () => {
    console.info('done')
})
gulp.task('watch',()=>{
    const watcher = gulp.watch('src/**/*',['default'])
    watcher.on('change',event=>{
        console.info(`File ${event.path} was ${event.type}`)
    })
})

babel

//利用npm运行
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "gulp": "gulp",
    "gulp-watch": "gulp watch",
    "babel": "babel src/script -d build/script"
},

//.babelrc配置
{
    "presets": [
        "env",
        "react"
    ],
    "plugins": [
        "transform-object-assign"
    ]
}

webpack

• 入口
• 出口
• loader
• plugin
• tree shaking

const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const webpack = require('webpack')

//tree shaking
//只提取用到的部分；且必须使用es6的模块系统
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

const extractLess = new ExtractTextPlugin({
    filename:'../style/[name].css',
    disable:process.env.NODE_ENV === 'development'
})

module.exports = {
    entry: {
        index: './src/script/index.js',
        vendor:['react','react-dom']
    },
    output: {
        path: path.resolve(__dirname, 'build/script'),
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                include: [
                    path.resolve(__dirname, 'src/script')
                ],
                loader: 'babel-loader'
            },
            {
                test: /\.less$/,
                include: [
                    path.resolve(__dirname, 'src/style')
                ],
                use: extractLess.extract({
                    use: [{
                        loader: 'css-loader'
                    }, {
                        loader: 'less-loader'
                    }],
                    // use style-loader in development
                    fallback: 'style-loader'
                })
            }
        ]
    },
    //独立出CSS样式
    //runtime 打包系统
    plugins:[
        extractLess,
        new webpack.optimize.CommonsChunkPlugin({
            names:['vendor','runtime']
        }),
        new UglifyJSPlugin()
    ],
    //独立出js
    // externals:{
    //  'react':'React',
    //  'react-dom':'ReactDOM'
    // }
}

//.bablerc 中忽略模块的配置
{
    "presets": [
        ["env",{"modules":false}],
        "react"
    ],
    "plugins": [
        "transform-object-assign"
    ]
}

//package.json
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "gulp": "gulp",
    "gulp-watch": "gulp watch",
    "babel": "babel src/script -d build/script",
    "webpack": "rm -rf build && webpack"
  },