Gulp学习笔记（三）：与webpack结合

起因

最近想写一个在线聊天的webApp，前台界面最初并不打算使用框架，使用纯html+css+js，为了更高效地开发，js最好使用es6新语法，css最好使用sass，那么问题来了，如何实现编译自动化，以及文件自动打包压缩，那当然是使用gulp+webpack啦！

---

需求与解决方案

• html

  • 对代码进行压缩
  • 使用gulp插件 gulp-htmlmin

• css

  • 对sass进行编译与压缩
  • 使用gulp插件 gulp-sass

• js

  • 对es6语法转换为es5，并打包到一个文件中并压缩
  • 使用webpack，利用babel进行语法转换，并打包成一个文件，使用gulp插件gulp-webpack 来引入webpack配置文件

• 优化

  • 使用gulp插件 gulp-plumber ，防止gulp因为编译错误而结束进程

---

依赖安装

npm install --save-dev babel-core babel-loader babel-preset-es2015 gulp gulp-sass gulp-plumber gulp-webpack gulp-htmlmin webpack

---

目录结构

• public 文件夹

  • 用于存储处理完的文件，也就是发送到浏览器端的

• src 文件夹

  • 用于存储待编译的文件，也是编写代码的地方

• gulpfile.js

  • gulp的配置文件

• server.js

  • express配置文件，用于响应浏览器请求，发送public文件夹中的文件，这里不再列出

• webpack.config.js

  • webpack配置文件

---

配置文件

// gulpfile.js
const gulp = require('gulp'),
  sass = require('gulp-sass'),
  plumber = require('gulp-plumber'),
  webpack = require('gulp-webpack'),
  htmlmin = require('gulp-htmlmin');

// 用于压缩html文件，具体使用方法见 gulp-htmlmin 官方文档
gulp.task('html', () => {
  return gulp.src('./src/*.html')
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('./public/'))
});
// 用于编译压缩scss文件
gulp.task('scss', () => {
  return gulp.src('./src/sass/**/*.scss')
      // 防止因为编译失败而退出
    .pipe(plumber())
     // 压缩scss文件
    .pipe(sass({
      outputStyle: 'compressed'
    }))
    .pipe(gulp.dest('./public/stylesheet/'))
});
// es6文件转换并压缩
gulp.task('es6', () => {
  return gulp.src('./src/js/**/*.js')
      // 使用webpack配置文件，详细见下
    .pipe(webpack(require('./webpack.config')))
    .pipe(gulp.dest('./public/js'));
});
// 实时监控文件是否发生变化，若发生变化，立刻选择使用上述三个任务
gulp.task('watch', () => {
  gulp.watch('./src/sass/**/*.scss', ['scss']);
  gulp.watch('./src/js/**/*.js', ['es6']);
  gulp.watch('./src/*.html', ['html'])
});
// 在终端中输入 gulp 就开始gulp进程
gulp.task('default', ['scss', 'es6', 'html', 'watch']); 

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  // 为了方便查看错误，总共有四种
  devtool: 'source-map',
  // 入口文件
  entry: __dirname + '/src/js/test.js',
  // 输出的路径
  output: {
    path: __dirname + '/public/js',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        // 使用babel进行转换
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
      }
    ]
  },
  plugins: [
  // 对bundle.js 进行压缩
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
};

---

结语

配置结束，后面开始项目开发，当然，还有文件打md5码什么的，也可以使用gulp来完成，我的第二个gulp学习笔记中有

感觉 gulp+webpack 的使用有一种 图形界面+终端 使用的感觉，各有所长嘛