gulp + webpack 搭建项目环境

搭建一个 gulp + webpack 的环境去学 react ，环境没有区分生产和开发环境，后续会完善，新手可以看一下。

项目目录：
config
- webpack.configjs // webpack 配置信息
- configuration.init.js // 配置变量，例如输出目录等
public // 打包后的输出目录
src // 开发目录
- js
- css
- static
- views
- app.js
index.html
gulpfile.js
.babelrc

---

.babelrc // env 编译 es6，es7，react 等

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "node": "current",
          "browsers": ["last 2 versions", "ie >= 7"]
        }
      }
    ]
  ]
}

---

configuration.init.js // 这里放一些配置的全局变量，后续可以把更多的配置加入

module.exports = {
  outPath: 'public' // 打包后输出到 public 目录
}

---

webpack.config.js

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

const configuration = require('./configuration.init.js')

const _path = path.resolve(__dirname, '../')

module.exports = {
  // 这里配置不同环境或不同需求的 webpack 配置，导出后在 gulp 引入
  dev: {
    entry: {
      app: path.resolve(_path, 'src/app.js'),
    },
    output: {
      path: `${path.resolve(_path)}/${configuration.outPath}`,
      filename: 'js/[name].[hash].js'
    },
    module: {
      loaders: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          query: {
            presets: ['env', 'react', 'stage-0']
          }
        },
        {
          test: /\.scss$/,
          loader: ExtractTextPlugin.extract('css-loader?minimize!sass-loader')
        },
        {
          test: /\.css$/,
          loader: ExtractTextPlugin.extract('style-loader!css-loader?minimize'),
        },
        {
          test: /\.(jpg|png)$/,
          loaders: ['url-loader']
        },
        {
          test: /\.json$/,
          loaders: ['json-loader'],
        }
      ],
    },
    plugins: [
      new webpack.optimize.CommonsChunkPlugin({
        name: 'common',
        filename: 'js/[name].[hash].js',
        minChunks: 3, // 有三个文件都用到才打包
      }),
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false,
        },
      }),
      new ExtractTextPlugin(`css/[name].[hash].css`),
      new HtmlWebpackPlugin({
        // 打包 html 文件，并自动把打包后的加入 hash 值的 js，css 文件引入
        template: `${_path}/index.html`,
        filename: `${_path}/${configuration.outPath}/index.html`,
        // hash: true // js等文件后加 ?[hash]
      }),
    ],
    resolve: {
      extensions: ['.js', '.json', '.scss', '.png', 'jpg'],
    }
  }
}

---

gulpfile.js

const fs = require('fs')
const path = require('path')
const gulp = require('gulp')
const webpack = require('webpack')

const merge = require('merge-stream')
const runSequence = require('run-sequence') // 同步执行任务
const del = require('del')
const gulpLoadPlugins = require('gulp-load-plugins')
const browserSync = require('browser-sync')

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

// 配置
const configuration = require('./config/configuration.init.js')
const webpackConfig = require('./config/webpack.config.js')

// 变量
const gulps = gulpLoadPlugins()
const version = parseInt(Math.random() * 10000000, 10) + 10000000
const con = {
  getType(val) {
    // 获取数据类型
    return Object.prototype.toString.apply(val).toLowerCase()
  },
   // 时间如果个位数加 0
  timeFormat(time) {
    time = this.getType(time) === '[object string]' ? time : String(time)
    return time.length === 1 ? '0' + time : time
  },
  // 得到 [12:23:01] 格式的时间
  getTime() {
    const nowTime = new Date()
    return `${this.timeFormat(nowTime.getHours())}:${this.timeFormat(nowTime.getMinutes())}:${this.timeFormat(nowTime.getSeconds())}`
  },
  // 终端彩色打印，col(1-6) 参数是颜色 
  // 无限链式调用,最后一个括号不能省略 con.log('aaa', 1)('bbb', 6)('ccc', 2)()
  // 最后的括号里如果加入 false 参数则不打印时间
  // 输出 => [00:00:00] aaabbbccc // 输出一串不同颜色的字符串
  log(text, col = 6) {
    let args = []
    args.push(`\x1b[3${col}m${text}\x1b[0m`)

    const fn_curry = (text_c, col_c = 6) => {
      if(text_c === void 0 || this.getType(text_c) === '[object boolean]') {
        text_c === void 0 || text_c === true ? args.unshift(`[\x1b[34m${this.getTime()}\x1b[0m] `) : null
        return console.log(args.join(''))
      } else {
        args.push(`\x1b[3${col_c}m${text_c}\x1b[0m`)
        return fn_curry }
    }
    return fn_curry
  },
}

// 清理文件
gulp.task('clean', () => del([`${configuration.outPath}/**/*`]));
// 复制文件
gulp.task('copy', () => {
  merge(
  // 图片
  gulp.src('./src/img/**/*')
    .pipe(gulps.changed(`./${configuration.outPath}/img`))
    .pipe(gulp.dest(`./${configuration.outPath}/img`)),
  // 复制图标
  gulp.src('./favicon.ico')
    .pipe(gulps.changed(`./${configuration.outPath}`))
    .pipe(gulp.dest(`./${configuration.outPath}`)) )
})

// webpack
gulp.task('webpack-dev', ['copy'], (callback) => {
  webpack(
    webpackConfig.dev, // webpack 打包配置导入 
  (err, stats) => {
    if (err) {
      console.log(err, 'err') } // 错误处理
    if (stats.compilation.errors.length > 0) {
      console.log(stats.compilation.errors[0].message, 'message')
    }
    // webpack 的打包信息另存为 txt 文件
  fs.writeFile(`${__dirname}/${configuration.outPath}/webpack.result.${stats.hash}.txt`, stats, (err) =>{
      if(err){
        console.log(err);
      }else{
        con.log(`webpack unpack info path: ${__dirname}/${configuration.outPath}/webpack.result.${stats.hash}.txt`, 5)()
      }
    })

    // webpack 输出日志
    con.log('******************\n\n', 2)()

    con.log(`${String(stats)}\n\n`, 4)()
    con.log('hash: ', 4)(stats.hash)()
    con.log('time: ', 4)(`${(stats.endTime - stats.startTime) / 1000}s`)()

    console.log('\n\n')
    con.log('******************', 2)()

    console.log('webpack-dev', 'done')
    callback()
  })
})

gulp.task('watch', function () {
  gulp.watch([
      `${__dirname}/src/**/*`,
  ], [
      'clean',
      'webpack-dev'
  ])
})

// 浏览器自动刷新
gulp.task('sync', () => {
  browserSync.init({
    proxy: 'localhost:10086',
    host: 'index.aaa.com',
    port: '10087',
    open: 'external',
  });
  gulp.watch(`${configuration.outPath}/**/*.*`).on('change', browserSync.create().reload);
})


// 默认任务
gulp.task('default', (cb) => {
  runSequence('clean', [
    'copy',
    'webpack-dev',
  ], cb)
});

// dev任务
gulp.task('dev', (cb) => {
  runSequence('clean', 'watch', [
    // 'sync',
    'copy',
    'webpack-dev',
  ], cb)
})

// build
gulp.task('build', (cb) => {
  runSequence('clean', [
    'copy',
    'webpack-dev',
  ], cb)
})

---

package.json

{
  "name": "react_test",
  "version": "1.0.0",
  "description": "this is a project for react practice",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "NODE_ENV=development gulp dev",
    "build": "npm run clean && NODE_ENV=production gulp build",
    "clean": "rm -rf public"
  },
  "author": "wenjiawei",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "browser-sync": "^2.23.6",
    "css-loader": "^0.28.9",
    "del": "^3.0.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "gulp": "^3.9.1",
    "gulp-changed": "^3.2.0",
    "gulp-html-replace": "^1.6.2",
    "gulp-load-plugins": "^1.5.0",
    "html-webpack-plugin": "^2.30.1",
    "lodash": "^4.17.4",
    "merge-stream": "^1.0.1",
    "node-sass": "^4.7.2",
    "react": "^16.2.0",
    "react-dedux": "^0.4.0-beta.4",
    "react-dom": "^16.2.0",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "redux": "^3.7.2",
    "run-sequence": "^2.2.1",
    "sass": "^1.0.0-beta.4",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.20.1",
    "webpack": "^3.10.0"
  }
}

原文链接：http://blog.csdn.net/qq_25243451/article/details/79248499