gulp打包详解

gulp打包详解

gulp 作用

  1. 删除文件中冗余的内容，压缩文件，减小文件体积
  2. 实际项目中运行的都是压缩完完成后的文件
  3. 见效加载响应时间

gulp打包压缩的对象

  1. html、css、js、sass、webserver
  2. 音频，图片，插件等正常情况下都是打包完成的，直接一如到dist对应文件即可
  3. 服务器gulp一起绑定执行的，执行的是打包压缩好的程序文件

gulp基本配置及文件结构

1、下载全局gulp

npm i -g gulp

2、项目目录结构

  • 源文件(src):
    • pages：存储HTML
    • css：存储css
    • sass：存储sass
    • images：存储图片
    • js：存储js
    • plugin：存储插件
  • 压缩文件(dist)：
    • 压缩后的文件存放在dist中
    • 文件名称与源文件名称一致
    • 实际项目中为了保持文件名称路径一致，不添加多余的文件名后缀min等

3、初始化项目

  • 整个项目第一次执行

    npm init -y

  • 实际项目中，或者下载的git中的项目
    • 下载package.hson文件，到项目中
    • package.json 中存储了所有的依赖包信息，以及相关设置
    • 在项目路径下直接运行 npm install 自动下载依赖包

4、安装依赖包

如果已经有完整的package.json,将 package.json 复制拷贝到指定的文件夹中,执行 npm install 会自动安装记录的依赖包　
安装依赖包 局部/项目依赖包

依赖名称 解释
npm i gulp gulp依赖包
CSS
npm i gulp-cssmin css打包压缩规范
npm i gulp-autoprefixer 自动添加css兼容前缀
JS
npm i gulp-uglify ES5语法压缩依赖包
npm i gulp-babel 其他语法转化成ES5语法规范
npm i @babel/core 配合gulp-babel的
npm i @babel/preset-env 配合gulp-babel的
HTML
npm i htmlmin html压缩依赖包
SASS
npm i sass sass文件依赖包
其他
npm i gulp-webserver 服务器依赖包
npm i del 删除依赖包,删除指定路径的文件内容

安装命令： npm i -D gulp gulp-cssmin gulp-autoprefixer del gulp-uglify gulp-babel @babel/core @babel/preset-env htmlmin sass gulp-webserver

5、配置gulpfile.js

这里会在下面进行详细介绍

6、运行项目

打开控制台窗口window+r cmd 切换到项目目录下执行命令:

gulp

gulp自带的功能

gulp.src       指定要执行打包文件的路径,也就是源文件的路径
gulp.dest      指定打包压缩好的文件,存储的路径
gulp.watch     监听模块
gulp.series    按照顺序执行程序,只能添加函数名称
gulp.parallel  同时执行程序,只能添加函数名称

gulpfile.js书写

注意

@babel/core 与 @babel/preset-env 是与gulp-babel配合使用的只需下载，不需要加载

制定打包规范

1. css 打包规范

const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
const cssmin = require('gulp-cssmin');
const cssHandler = function(){
    return gulp.src('./src/css/*.css')
        .pipe( autoprefixer() )
        .pipe( cssmin() )
        .pipe( gulp.dest( './dist/css' ) )
}
注意
  1. 先添加前缀,再执行打包
  2. 设定 浏览器兼容版本,在 package.json中设定
    "browserslist": [
    "last 2 versions",
    "IOS > 7",
    "FireFox > 20"
]

2. js 打包规范

const uglify = require('gulp-uglify');
const babel = require('gulp-babel');
const jsHandler = function () {
    return gulp.src('./src/js/*.js')
        .pipe(babel({ presets: ['@babel/env'] }))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js'))
}
注意
  1. babel( {presets:['@babel/env']} ) 以对象的形式定义参数
  2. 先将其他语法规范,转化为 ES5 语法规范,再执行打包压缩

3. html打包压缩规范

const htmlmin = require('gulp-htmlmin');
const htmlHandler = function () {
    return gulp.src('./src/pages/*.html')
        .pipe(htmlmin({
            removeAttributeQuotes: true,       // 删除属性上的双引号
            removeComments: true,              // 删除注释内容
            collapseBooleanAttributes: true,   // 删除布尔属性的属性值
            collapseWhitespace: true,          // 删除标签之前的空格
            minifyCSS: true,                   // 压缩html文件中的css程序 
            minifyJS: true,                    // 压缩html文件中的js程序
            // 虽然可以压缩HTML中的js和css,但是压缩执行的不完美
            // 实际项目中,不要有内部,js和css,都要写成外部文件形式
        }))
        .pipe(gulp.dest('./dist/pages'))
}
注意
  1. htmlmin() 中以对象的形式定义参数

4. 图片等不需要打包压缩的,就直接移动至dist文件夹

const imgHandler = function () {
    return gulp.src('./src/images/*.*')
        .pipe(gulp.dest('./dist/images'))
}

5. 制定sass的编译打包压缩规范

const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const cssmin = require('gulp-cssmin');
const sassHandler = function () {
    return gulp.src('./src/sass/*.scss')
        .pipe(sass())                       // 将 sass文件编译为 css文件
        .pipe(autoprefixer())               // 之后就执行css的打包规范
        .pipe(cssmin())
        .pipe(gulp.dest('./dist/css'))    // 存储也是存储在css文件夹中
}

6. 服务器执行规范 调用执行打包压缩好的文件

const webserver = require('gulp-webserver');
const webserverHandler = function () {
    return gulp.src('./dist')      // 指定的是运行文件的目录,也就是要运行的压缩的文件,所在的文件夹
        .pipe(webserver({
            host: '127.0.0.1',                // 主机域名,当前就是 127.0.0.1 或者 localhost
            port: '8088',                     // 定义监听端口
            livereload: true,                 // 执行热启动,如果程序代码,改变,自动刷新页面,不用重启服务器,不用手动刷新页面
            open: './pages/index.html',   // 默认打开的网页,输入 127.0.0.1:8080 地址就会直接打开的页面
            // 默认的地址是,gulp.src()设定的文件夹位置,也就是默认是 dist 压缩文件夹所在的位置,执行的也是压缩之后的文件
        }))
}
注意
  1. gulp.src('./dist') 设定执行的打包压缩文件,存储的文件夹路径
  2. open 设定服务器启动之后,执行的默认页面
    设定相对路径的起始位置,是 gulp.src() 设定的文件夹位置
  3. livereload:true, 热启动 页面样式等更新,不用手动刷新,服务器会自动刷新

设置程序监听

  1. 设定删除规范----也就是每次执行新的打包压缩之前,先删除原始的打包内容
    const del = require('del');
const delHandler = function () {
    return del(['./dist']);
}
  2. 设定监听规范----指定监听的文件文件夹,如果出现修改,会自动重新打包压缩
    const watchHandler = function () {
    gulp.watch('./src/css/*.css', cssHandler);
    gulp.watch('./src/js/*.js', jsHandler);
    gulp.watch('./src/pages/*.html', htmlHandler);
    gulp.watch('./src/images/*.*', imgHandler);
    gulp.watch('./src/sass/*.scss', sassHandler);
}

    注意

    1. gulp.watch() 第一个参数是,监听的文件夹文件路径
      gulp.watch() 第二个参数是,监听文件内容发生改变时,执行的打包规范
    2. 必须要定义的打包规范的函数名称
  3. 设定导出默认执行程序
    module.exports.default = gulp.series(
    delHandler,
    gulp.parallel(cssHandler, jsHandler, htmlHandler, imgHandler, sassHandler),
    webserverHandler,
    watchHandler,
)

    注意:

    1. 设定 module.exports.default 之后 ,再执行gulp,只要在路径下输入 gulp 就可以了
    2. gulp.series() 按照顺序执行设定的程序,顺序必须正确
    3. gulp.parallel() 是同时执行所有设定的程序
      顺序一定是 : 先删除之前打包压缩的文件
      在重新压缩所有需要打包压缩,移动的文件
      开启服务器
      执行监听

完整代码

// 1 , 加载依赖包

// 加载 项目gulp 依赖包
const gulp = require('gulp');

// 加载 del删除依赖包
const del = require('del');

// 加载 css相关依赖包
const autoprefixer = require('gulp-autoprefixer');
const cssmin = require('gulp-cssmin');

// 加载 js相关依赖包
const uglify = require('gulp-uglify');
const babel = require('gulp-babel');

// 加载 HTML 相关依赖包
const htmlmin = require('gulp-htmlmin');

// 加载 sass 依赖包
const sass = require('gulp-sass');

// 加载 服务器 相关依赖包
const webserver = require('gulp-webserver');

// 2,定义打包规范

// 2-1,css打包规范
const cssHandler = function(){
    return gulp.src('./src/css/*.css')
           .pipe( autoprefixer() )
           .pipe( cssmin() )
           .pipe( gulp.dest( './dist/css' ) )
}


// 2-2,js打包规范
const jsHandler = function(){
    return gulp.src('./src/js/*.js')
           .pipe( babel( {presets:['@babel/env']} ) )
           .pipe( uglify() )
           .pipe( gulp.dest( './dist/js' ) )
}

// 2-3,html打包规范
const htmlHandler = function(){
    return gulp.src( './src/pages/*.html' )
           .pipe(htmlmin({
               removeAttributeQuotes : true ,       // 删除属性上的双引号
               removeComments : true ,              // 删除注释内容
               collapseBooleanAttributes : true ,   // 删除布尔属性的属性值
               collapseWhitespace : true ,          // 删除标签之前的空格
               minifyCSS : true ,                   // 压缩html文件中的css程序 
               minifyJS : true ,                    // 压缩html文件中的js程序
                                                    // 虽然可以压缩HTML中的js和css,但是压缩执行的不完美
                                                    // 实际项目中,不要有内部,js和css,都要写成外部文件形式
           }))
           .pipe( gulp.dest( './dist/pages' ) )
}

// 2-4, 图片等不需要压缩打包的文件
const imgHandler = function(){
    return gulp.src('./src/images/*.*')
           .pipe( gulp.dest('./dist/images') )
}

// 2-5, sass的编译 打包压缩 规范
const sassHandler = function(){
    return gulp.src( './src/sass/*.scss' )
           .pipe( sass() )                       // 将 sass文件编译为 css文件
           .pipe( autoprefixer() )               // 之后就执行css的打包规范
           .pipe( cssmin() )
           .pipe( gulp.dest( './dist/css' ) )    // 存储也是存储在css文件夹中
}

// 2-6, 服务器打包执行规范
// gulp.src定义的是执行打包文件的路径.执行的是指定文件中打包之后的文件内容     
const webserverHandler = function(){
    return gulp.src('./dist')      // 指定的是运行文件的目录,也就是要运行的压缩的文件,所在的文件夹
           .pipe(webserver({
               host:'127.0.0.1',                // 主机域名,当前就是 127.0.0.1 或者 localhost
               port:'8088',                     // 定义监听端口
               livereload:true,                 // 执行热启动,如果程序代码,改变,自动刷新页面,不用重启服务器,不用手动刷新页面
               open:'./pages/index.html',   // 默认打开的网页,输入 127.0.0.1:8080 地址就会直接打开的页面
                                                // 默认的地址是,gulp.src()设定的文件夹位置,也就是默认是 dist 压缩文件夹所在的位置,执行的也是压缩之后的文件
           }))
}


// 3,定义监听规范

// 3-1,删除规范
const delHandler = function(){
    return del(['./dist']);
}

// 3-2,监听规范
const watchHandler = function(){
    gulp.watch( './src/css/*.css' ,  cssHandler);
    gulp.watch( './src/js/*.js' ,  jsHandler);
    gulp.watch( './src/pages/*.html' ,  htmlHandler);
    gulp.watch( './src/images/*.*' ,  imgHandler);
    gulp.watch( './src/sass/*.scss' ,  sassHandler);
}

// 3-3,定义默认执行程序
module.exports.default = gulp.series(
    delHandler,
    gulp.parallel( cssHandler , jsHandler , htmlHandler , imgHandler , sassHandler),
    webserverHandler,
    watchHandler,
)
前端工程化

相关

前端工程化——travis-ci

标签