gulp & webpack - Githubissues

gulp
webpack

1. gulp安装

在深入研究配置任务之前，首先进行gulp安装 $ npm install gulp -g 这种命令安装是全局安装，可以访问gulp的客户端，我们需要在本地工程目录下进行本地安装，使用cd切换到工程目录运行如下命令（需先手动新建一个package.json文件） $ npm install gulp --save-dev 安装完成后，package.json会自动生成一些gulp的配置信息

2. 插件安装

通过安装插件来实现以下任务：

Sass compile (gulp-ruby-sass)
Autoprefixer (gulp-autoprefixer)
Minify CSS (gulp-cssnano)
JSHint (gulp-jshint)
Concatenation (gulp-concat)
Uglify (gulp-uglify)
Compress images (gulp-imagemin)
LiveReload (gulp-livereload)
Caching of images so only changed images are compressed (gulp-cache)
Notify of changes (gulp-notify)
Clean files for a clean build (del)

运行以下命令进行本地安装： $ npm install gulp-ruby-sass gulp-autoprefixer gulp-cssnano gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev 安装的插件信息都会在package.json文件里体现出来

3. 使用插件

在当前工程目录新建一个gulpfile.js文件，编写加载代码，如下：

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    cssnano = require('gulp-cssnano'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload'),
    del = require('del');

4. 创建task

4.1 Compile Sass, Autoprefix and minify

首先，将配置Sass编译，实现一个expanded的样式、可自动添加前缀且最小化文件保存到本地一个Sass编译器，

gulp.task('styles', function() {
  return sass('src/styles/main.scss', { style: 'expanded' })
    .pipe(autoprefixer('last 2 version'))
    .pipe(gulp.dest('dist/assets/css'))
    .pipe(rename({suffix: '.min'}))
    .pipe(cssnano())
    .pipe(gulp.dest('dist/assets/css'))
    .pipe(notify({ message: 'Styles task complete' }));
});

对以上代码做一些说明

gulp.task('styles', function() { ... )};

gulp.taskAPI是用来声明创建一个task，便于能够在终端运行$ gulp style

return sass('src/styles/main.scss', { style: 'expanded' })

这是gulp-ruby-sass插件的一个API，用于设置编译的源文件和一些参数；在收到编译结束通知之前，此API会异步返回一个流，确定这个任务是全部完成；

.pipe(autoprefixer('last 2 version'))

使用pipe方法将源文件输出到插件中；

.pipe(gulp.dest('dist/assets/css'));

gulp.destAPI用于设置文件输出路径；

4.2 JSHint, concat, and minify JavaScript

您是不是很好奇使用gulp怎么创建task，接下来我们将通过对脚本提示、拼接、最小化进行一些演示：

gulp.task('scripts', function() {
  return gulp.src('src/scripts/**/*.js')
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(gulp.dest('dist/assets/js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest('dist/assets/js'))
    .pipe(notify({ message: 'Scripts task complete' }));
});

gulp.src用于指定要编译的文件路径，我们需要为jslint声明reporter，此处使用了默认值，更多信息请参考JSLint

4.3 Compress Images

接下来设置图片压缩：

gulp.task('images', function() {
  return gulp.src('src/images/**/*')
    .pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
    .pipe(gulp.dest('dist/assets/img'))
    .pipe(notify({ message: 'Images task complete' }));
});

使用imagemin插件来进行图片压缩，我们可以使用缓存来进行一些优化，因此可以使用gulp-cache插件，然后修改下面代码

//before
.pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))

//after
.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))

4.4 Clean up

在部署之前，清理一些源文件和构建文件是一个良好的作风，只保留线上需要的文件

gulp.task('clean', function() {
    return del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img']);
});

我们没有使用gulp插件，而是使用gulp内置的模块；最后返回以确保task完成

4.5 The default task

使用$ gulp运行默认的task，执行以上创建的task，

gulp.task('default', ['clean'], function() {
    gulp.start('styles', 'scripts', 'images');
});

注意，默认的task多了一个数组，表示在执行start之前会先执行数组里的task

4.6 Watch

表示对变化的文件进行一些监听；首先要新建一个task，使用gulp.watchAPI进行文件监听

gulp.task('watch', function() {

  // Watch .scss files
  gulp.watch('src/styles/**/*.scss', ['styles']);

  // Watch .js files
  gulp.watch('src/scripts/**/*.js', ['scripts']);

  // Watch image files
  gulp.watch('src/images/**/*', ['images']);

});

使用gulp.watch关注变化的文件和通过依赖的数组定义task，然后使用$ gulp watch就可以对改变的文件执行相应的task

4.7 LiveReload

gulp可以实行对变化的文件进行自动刷新，将修改watch配置LiveReload server

gulp.task('watch', function() {

  // Create LiveReload server
  livereload.listen();

  // Watch any files in dist/, reload on change
  gulp.watch(['dist/**']).on('change', livereload.changed);

});

前提是需要下载和启用LiveReload browser插件，你也可以手动配置

资料参考

webpack配置

scripts

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --colors --display-error-details",
"start": "webpack-dev-server --open --config webpack.dev.js",
"build": "webpack --colors --display-error-details --config webpack.prod.js"
}

webpack.dev.js


const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const cleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = merge(common, { devtool: 'inline-source-map', devServer: { contentBase: './dist' }, plugins: [ new cleanWebpackPlugin(['dist']) ] });


- webpack.prod.js
```javascript
const webpack = require('webpack');
const merge = require('webpack-merge');
const uglifyjsPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    devtool: 'source-map',
    plugins: [
        new uglifyjsPlugin({
            sourceMap: true
        }),
        new webpack.DefinePlugin({
            'process.env': {NODE_ENV: JSON.stringify('production')}
        })
        new webpack.optimize.UglifyJsPlugin()
    ]
});

webpack.common.js


const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = { entry: { app: 'index.js', vendor: [ 'react', 'react-dom' //把公共库提取出来存放在一个单独的文件里 ] }, plugins: [ //使得每个模块都可用，不用再一个一个require('react') new webpack.ProvidePlugin({ React: "react" }), new HtmlWebpackPlugin({ title: 'webpack', template: 'index.html' }), new webpack.HashedModuleIdsPlugin(), new webpack.optimize.CommonsChunkPlugin({ name: 'vendor' }), new webpack.optimize.CommonsChunkPlugin({ name: 'runtime' }) ], output: { filename: '[name].[chunkhash].js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /.jsx?$/, exclude: /node_modules/, use: ['babel-loader'] }, { test: /.css$/, use: ['style-loader', 'css-loader'] } ] } };


以上插件名 见名知义，很容易知道用来干什么的。

[资料参考](https://webpack.js.org/guides/getting-started/)

webpack-dev-server热更新失效解决方法 #14

[top](#170)

msforest / notebook

gulp & webpack #17