打包工具

gulp

浅谈gulp

• 第一步、安装gulp：

  全局的：npm i gulp -g 启动器
  本地的：npm i gulp 核心库

• 第二步、编写配置：
  gulpfile.js

在gulp中，存在已在处理流操作pipe，还有task函数

task可以用多个，处理一个格式的文件时，比如处理js文件

gulp.task('js', ()=>{ return xxx}）

task的函数，全部处理都在return当中，xxx可以做需要的gulp操作

下面是gulpfile.js文件（运行gulp的必须物）

const gulp = require('gulp')
const uglify = require('gulp-uglify')

gulp.task('js', ()=>{
    return gulp.src(['./src/js/*.js'])
    //流操作
    .pipe(uglify())
    .pipe(gulp.dest('./build/js'))
})

gulp.task('default', ['js'])

一个简单的小测试，这里使用了两个包，一个gulp本体，一个gulp-uglify是用于压缩用的

1. gulpfile文件里面必须要有一个default属性的task函数，不然就得自己一个一个的运行task，
2. default为总输出，就是你里面写了多少个task它都输出
3. return gulp.src([''])这里，gulp.src（[]）里面放一个数组的原因是因为有可能有多个格式的文件，所以这里我使用了数组, pipe（uglify（））就是用uglify包进行压缩，pipe是流，用node压缩过的都知道
4. pipe(gulp.dest())这里是输出目录，dest里面写的是需要输出的路径

一些gulp包的使用

const gulp = require('gulp')
const uglify = require('gulp-uglify')
const concat = require('gulp-concat')
const rename = require('gulp-rename')
const cssmin = require('gulp-cssmin')
const imagemin = require('gulp-imagemin')

• concat合并包
• rename重命名包
• cssmin css压缩包
• imagemin 图片压缩包

concat使用

gulp.task('js', ()=>{
    return gulp.src(['./src/jg/**/*.js'])
    .pipe(concat('bundle.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./bulid/js'))
})

在uglify压缩前，放一个concat(name)，就可以把需要压缩的东西合并成一个新的文件

rename使用

gulp.task('js', ()=>{
    return gulp.src(['./src/jg/**/*.js'])
    // .pipe(concat('bundle.min.js'))
    .pipe(uglify())
    .pipe(rename({'suffix' : '.min'}))
    .pipe(gulp.dest('./bulid/js'))
})

在输出前，使用rename({'suffix:name'})这样就可以修改你需要输出的文件的名字

cssmin 的使用

gulp.task('css', ()=>{
    return gulp.src(['./src/css/**/*.css'])
    .pipe(concat('style.min.css'))
    .pipe(cssmin())
    .pipe(gulp.dest('./bulid/css'))
})

选择需要压缩的css文件，在输出前进行cssmin（）即可压缩css文件

imagemin的使用

gulp.task('image', ()=>{
    return gulp.src(['./src/image/**/*.jpg','./src/image/**/*.png','./src/image/**/*.gif'])
    .pipe(imagemin([
        imagemin.gifsicle({interlaced: true}),//渐进加载
        imagemin.jpegtran({propressive: true}),
        imagemin.optipng({optimizationLevel: 5})//优化级别
    ])
    )
})

image的参数比较多，需要配置三个参数，分别处理jpf，gif，png的

因为之后要用的是webpack，所以gulp就稍微研究一下就好了

---

webpack

webpakc.config.js配置文件

module.ewports={
    mode:'',
    entry:''||{},
    output:{
        path,
        filename
    },
    module:{
        rules:[]
    }
}

mode:模式,有production生产模式,development开发模式

entry:入口,string为单入口，json是多入口

output:path生成的文件地址,filename文件名字[name]为占位符

module:模块，添加loader，loader是从后面开始读起

loader（核心）

处理css

• css-loader
• style-loader

rules:[{test:/\.css$/, use:['style-loader','css-loader']}]

就可以处理打包css的文件了

浏览器兼容

• postcss-loader
• autoprefixer

可处理浏览器的兼容性,帮你生成兼容前缀

postcss-loader需要一个配置文件，postcss.config.js

rules:[{test:/\.css$/, use:['style-loader','css-loader','postcss-loader']}]

postcss.config.js

module.exports={
    plugins:[
        require(autoprefixer)//需要这个插件
    ]
}

• file-loader

读取并且输出任何类型的文件（图片，文件之类的）,当use有参数时，就需要这样子用

            {test:/.(jpg|png|gif)$/i, use:{
                loader:'file-loader',
                options:{
                    outputPath:'images/',
                }
            }}

outputPath是输出的路径

loader是选择使用的loader

• url-loader

读取并且输出base64

            {test:/.(jpg|png|gif)$/i, use:{
                loader:'url-loader',
                options:{
                    outputPath:'images/',
                    limit:500*1024
                }
            }}

url-loader就多一个limit选项，是最小界限，这里是设置了凡是低于500k的文件都编译成base64，正常是设置成32K为一个界限，32K以上就输出一个文件，一下就编译成base64放到js文件中去

url-loader可以顶替点file-loader，因为功能多一点

• less-loader编译less文件

需要装两个包less-loader less

less文件编译的时候，没法加载到页面，所以需要配合css-loader和style-loader一起使用

{test:/\.less$/, use:['style-loader','css-loader','less-loader']}

• babel-loader编译es6

三个包 babel-loader @babel/core @babel/preset-env

{test:/\.jsx?/i,//js或则jsx
                exclude:/node_modules/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:['@babel/preset-env']
                    }
                }
            }

多一个选线，presets这个是babel的运行环境

• source-map保留原始文件，方便查错

devtool:'source-map'//开发工具

在module后面加上这个 ，就可以使用source-map工具

• 热更新webpack-dev-server

下载包 webpack ,webpack-cli,webpack-dev-server

在scripts中加上一句命令"start": "webpack-dev-server"

命令行运行npm run start

这里注意html的路径，dev-server生成的文件是在服务器上的，不是存在磁盘上的，html读取build里面的文件是不会发生改变的，要改为服务器的地址,即根目录上的文件

• 代码质量-eslint

下载包eslint,eslint-loader

看需求配置吧

.eslintrc文件配置

{
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "indent": ["error", 2],//缩进
    "linebreak-style": ["error", "windows"],//换行风格
    "quotes": ["error", "double"],//引号
    "semi": ["error", "always"]//分号
  }
}

webpack.config.js

const path=require('path');

module.exports={
  mode: 'development',//开发环境
  entry: './src/js/1.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.min.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/i,
        loader: 'eslint-loader',
        exclude: /node_modules/,
        options: {

        }
      }
    ]
  },
  devtool: 'source-map'
};

• 测试-jest

下载包jest,jest-webpack

需要一个点.test.js文件测试

const mod = require('../src/js/3.js')

test('fab 7 ',()=>{
    expect(mod.fab(7).toBe(13))
})

3.js模块文件

export function fab(n){
    if(n ==1 || n==2){
        return 1
    }else{
        return fab(n-1)+fab(n-2)
    }
}

如何处理除了js文件外的东西

很简单,把文件读取出来变成字符串然后再输出

先学习到这里，之后在项目中用到了，才有深刻的体验到打包工具的强大