1.gulp引入

在网页开发会遇到很多静态资源，这些静态资源包括html css js image video audio jsx json svg
随着静态资源越来越多，会存在两个问题：
a. 静态资源过多造成网络请求过多。 把资源打包压缩合并
b. 静态资源之间依赖关系错综复杂。 使用模块化规范

1.1 gulp是什么

Gulp是一个前端自动化构建工具。Gulp特点：基于任务的，同时也是基于管道流
Gulp可以帮我们完成JavaScript/sass/html/image/css 等文件的的测试、检查、合并、压缩混淆、格式化、浏览器自动刷新、部署文件生成等操作，同时可以对文件进行监听，如果文件有改动，可以自动处理生成新的文件

1.2 gulp的使用步骤

a.全局安装gulp-cli npm install gulp-cli –g
b.来到项目目录下，通过npm init -y 创建package.json
c.在项目目录下安装gulp npm install gulp –save
d.在项目目录下创建一个 gulpfile.js
e.我们可以在gulpfile.js中写gulp的任务
f.我们可以通过gulp + 任务名字 就可以运行指定的任务了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
gulp-concat ： 可以对js、css代码进行合并
gulp-uglify ： 可以对js代码的压缩混淆
gulp-cssnano ： 可以对css代码进行压缩
gulp-htmlmin : 可以对html进行压缩
gulp-tinypng-nokey ： 可以对图片进行压缩


//gulp对js代码压缩合并混淆
gulp.task("script",function(){
    return gulp.src('src/js/*.js')
    .pipe(concat('index.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'));
})

//gulp对css代码压缩合并
gulp.task("css",function(){
    return gulp.src('src/css/*.css')
    .pipe(concat('index.css'))
    .pipe(cssnano())
    .pipe(gulp.dest('dist/css'));
})

//gulp对html压缩
gulp.task("html",function(){
    return gulp.src('src/a.html')
    .pipe(htmlmin({collapseWhitespace:true}))
    .pipe(gulp.dest('dist'));
})

//gulp对图片压缩
gulp.task('image', function() {
    gulp.src('./images/*.*')
        .pipe(tinypng_nokey ())
        .pipe(gulp.dest('./dist/images'));
})

// gulp.watch 监视文件变化，执行相应任务
gulp.task('mywatch', function(){
    // 1.监视js文件的变化，然后执行script任务
    // 第一个参数：要监视的文件的规则
    // 第二个参数：是要执行的任务
    gulp.watch("src/js/*.js",gulp.series("script"))
})

1.3 gulp解决浏览器缓存问题

//给js文件重命名 并且输出到dist目录下

1
2
3
4
5
6
7
8
gulp.task('js2', () =>
    gulp.src(['./src/js/*.js'])
        .pipe(gulp.dest('dist')) // 将源文件拷贝到打包目录
        .pipe(rev())    //将源文件使用hash重命名，生成新的文件
        .pipe(gulp.dest('dist')) // 将生成新的hash文件添加到打包目录
        .pipe(rev.manifest('js-rev.json'))
        .pipe(gulp.dest('dist')) // 将map映射文件添加到打包目录
);

//将html中的js文件用重名后的名字替换

1
2
3
4
5
6
gulp.task('html2', () => {
    const jsManifest = gulp.src('dist/js-rev.json'); //获取js映射文件
    return gulp.src('./src/a.html')
      .pipe(revRewrite({manifest: jsManifest})) // 把引用的js替换成有版本号的名字
      .pipe(gulp.dest('dist'))
});

//当c.js文件发生变化之后，会重新执行js和html2的任务
gulp.task(‘mywatch2’, function(){
// 1.监视js文件的变化，然后执行script任务
// 第一个参数：要监视的文件的规则
// 第二个参数：是要执行的任务
return gulp.watch(“./src/js/*.js”,gulp.series([‘js2’,’html2’]))
})

2.webpack

gulp 是一个task runner，在gulp中我们想要完成什么功能就要写对应的task
webpack 是一个module bundle，在webpack中对于不同类型的文件(模块)，都会有不同的loader与之对应

2.1 webpack的基本使用

A． 全局安装webpack和webpack-cli
npm i webpack@4.27.1 -g
npm i webpack-cli@3.1.2 –g
B. 在项目中安装webpack
npm i webpack@4.27.1 --save-dev
C. 写对应的代码 npm install jquery

D. 使用webpack的打包命令 webpack ./src/main.js -o ./dist/bundle.js
在打包的时候会将部分的es6语法转换成es5语法(因为浏览器并不能识别所有的es6语法)
E． 在页面上使用打包后的bundle.js就可以了

#### 2.2 webpack.config.js的创建 //webpack的配置文件默认使用CommonJS的模块化方案 //但是webpack支持各种模块化方案 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const path = require('path');

module.exports = {
  //webpack的模式 
  //如果在开发程序的时候，模式为development
  //如果是发布环境，模式为production
  mode:"development",
  //项目入口文件
  entry: './src/main.js',
  //配置输出项
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  //忽略打包文件超过250kb之后的警告问题
  performance: {
    hints: false
  },
};
接下来就可以使用webpack命令来打包构建了 #### 2.3 webpack-dev-server的使用 webpack-dev-server：主要是在项目开发的时候帮我们完成项目的自动打包构建（源代码一修改就会重新自动打包） //1.安装对应的包 
1
2
3
npm i webpack-dev-server@3.1.9 --save-dev
npm i webpack@4.27.1 --save-dev     //项目中安装webpack
npm i webpack-cli@3.1.2
//2.在package.json的script选项中配置信息如下： 
1
2
3
4
5
6
7
8
9
10
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  }

  "dev": "webpack-dev-server --open --port 3001 --contentBase src --hot"
   // --open  自动打开浏览器
   // --port 3001  指定webpack-dev-server开启的端口
   // --contentBase src  指定从什么目录下加载资源
   //  --hot  开启热更新
//3.我们就可以直接通过npm run dev来运行程序了 //4.运行完之后发现页面并没有显示如我们想要的颜色，这是因为webpack-dev-server是将bundle.js放到了内存中，并没有放到磁盘的dist目录下 //5.修改index.html中的script的引入

//6.在webpack.config.js中配置webpack-dev-server
//开启热更新 步骤1：引入webpack

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const webpack = require('webpack'

//配置devServer的参数
  devServer: {
    contentBase: path.join(__dirname, 'src'),
    compress: true,
    port: 9000,
    open: true,
    //开启热更新第2步：在devServer中指定hot:true
    hot: true
  },
// 配置插件的节点
  plugins: [ 
    //开启热更新第3步：指定热更新的插件
    new webpack.HotModuleReplacem

entPlugin(),
],

2.4 html-webpack-plugin

作用：可以将html文件配置到内存，并且将打包后的bundle.js自动注入到内存中的html文件中

npm i html-webpack-plugin@3.2.0 --save-dev

// 导入自动生成HTMl文件的插件

1
var htmlWebpackPlugin = require('html-webpack-plugin');

// 配置插件的节点

1
2
3
4
5
6
7
8
9
plugins: [ 
  //开启热更新第3步：指定热更新的插件
  new webpack.HotModuleReplacementPlugin(), 
  // 添加plugins节点配置插件
  new htmlWebpackPlugin({
      template:path.resolve(__dirname, 'src/index.html'),//模板路径
      filename:'index.html'//自动生成的HTML文件的名称
  })
],

2.5 css文件的加载器

npm i style-loader css-loader --save-dev 加载css文件
npm i less-loader less 加载less文件
npm i sass-loader node-sass --save-dev 加载scss文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
module: {
       rules: [
           {
               test: /\.css$Extra close brace or missing open brace/,
               use: ['style-loader', 'css-loader'],
           },
           {
               test: /\.less$/,
               use: ['style-loader', 'css-loader', 'less-loader']
           },
           {
               test: /\.scss$/,
               use: [
                   "style-loader", // 将 JS 字符串生成为 style 节点
                   "css-loader", // 将 CSS 转化成 CommonJS 模块
                   "sass-loader" // 将 Sass 编译成 CSS，默认使用 Node Sass
               ]
           }
       ],
   },

Css中有图片路径的时候，需要安装url-loader和file-loader

1
npm i url-loader file-loader --save-dev
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{ 
                test: /\.(png|jpg|gif|bmp|jpeg)$/, 
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            //如果图片小于8kb，会使用base64编码的图片
                            //如果图片大于8kb，会使用带别名的图片
                            limit: 8192,
                            name:'[hash:8]-[name].[ext]'
                        }
                    }
                ]
            }

2.6 字体图标的使用

1
2
3
4
5
6
7
8
// 处理 字体文件的 loader
            {   test: /\.(ttf|eot|svg|woff|woff2)$/,
                use: [
                    {
                        loader:'url-loader'
                    }
                ]
            },

2.7 babel

babel 可以帮我们将es6 、es7 甚至更高版本的js语法转换成低版本的js语法，以供浏览器识别。
//1.安装相应的包
npm i babel-core@6.26.3 babel-loader@7.1.5 babel-plugin-transform-runtime --save-dev
npm i babel-preset-env babel-preset-stage-0 --save-dev

//2.webpack.config.js配置babel-loader
//配置 babel 的 loader规则的时候，必须 把 node_modules 目录，通过 exclude 选项排除掉

1
2
3
4
5
            { 
​                test: /\.js$/, 
​                use: 'babel-loader', 
​                exclude: /node_modules/ 
​            },

//3.在项目根目录下创建.babelrc文件

1
2
3
4
{
    "presets": ["env", "stage-0"],
    "plugins": ["transform-runtime"]
}