gulp自动化构建工具的使用

木華
531 阅读6分钟

概念

前端的构建工具常见的有Grunt、Gulp、Webpack三种，Grunt比较老旧，功能少，更新少，插件少。

gulp是一个自动化构建工具，主要用来设定程序自动处理静态资源的工作。简单的说，gulp就是用来打包项目的。

gulp是一个基于任务的工具，也就是说，gulp规定，不管做什么功能，都用统一的接口管理，必须去注册一个任务，然后去执行这个任务，在任务代码中，去做想想做的功能。这是gulp的特点之一：任务化。

官网：gulpjs.com/

中文文档：www.gulpjs.com.cn/docs/

插件的使用方法：www.npmjs.com

安装

全局安装gulp

cnpm i gulp -g

检测是否安装成功

gulp -v  

# 安装成功之后会显示版本信息

初始化项目

cnpm init -y 

# 成功之后会生成一个package.json的文件
# 注意：在中文目录下无法使用这个命令，这时可以使用 npm init 这个命令

在项目中局部安装gulp

使用cnpm默认下载的时候不会记录在package.json文件中，需要记录的时候要在后面加参数

cnpm i gulp --seve-dev
# 简写
cnpm i gulp -D

后面的其他参数

--seve | -S 
# 是强制保存在package.json中，意思是项目依赖，开发的时候我需要他写代码，等项目上线以后，项目运行起来也需要他

--save-dev | -D 
# 是强制保存在pageckage.json中，意思是开发依赖，开发的时候我需要他，比如打包工具 ，等项目上线以后，我就不需要他运行项目

将来，到了服务器环境中，使用 cnpm i 会安装项目依赖，但是不会安装开发依赖

入门使用

创建glupfile.js文件

在项目根目录下创建一个glupfile.js的文件，文件的名字是固定的，不可私自更改

gulp的每个功能都是一个任务，压缩css的任务、合并文件的任务。gulp规定任务要写在一个叫做glupfile.js的文件中，在这个文件中用来配置所有任务。

写入代码

在glupfile.js写入以下代码

function defaltTask(cb) {
    console.log("测试成功");
    cb()
}

exports.default = defaltTask;

在命令行中执行这个任务

gulp

image.png

到这里，我们的基本入门测试就结束了，接下来我们了解几个gulp常用的api，方便接下来的学习

gulp几个常用接口

  • series：同步任务

  • parallel：异步任务

  • src：读取文件

  • dest：写入文件

  • watch：监视文件变化

  • pipe：管道

series，parallel，src，dest，watch 这几个api都是从gulp中获取

let {series,parallel,src,dest,watch} = require('gulp');

同步任务

如果希望让多个任务按照顺序执行，需要用到gulp的series接口，用来让任务同步执行

// 将任务导出并按照排好的顺序执行
exports.default = series(print1, print2)

异步任务

如果要让两个任务是异步执行的，需要用到gulp的parallel接口，用来让任务异步执行

// 将任务导出并按照排好的顺序执行
exports.default = parallel(print1, print2)

读取文件

将本地文件读取到gulp内存中，需要用到gulp的src接口，读取出来的是数据流

src(要读取的文件路径)

写入文件

将内存中数据输出到本地文件中，需要使用gulp的dest接口，参数是一个文件夹路径

dest(输出文件的文件夹路径)

管道

将数据流接过来进行操作，不需要解构

既然gulp的所有操作都是基于流的，就需要将上一步的结果流向下一个操作，中间需要用到管道：

上一步的操作
.pipe(下一步的操作)

监视文件变化

用来监视某个或某些文件发生变化，可以在变化的时候，执行一个任务函数或者是任务组合

watch(监视的文件或多个文件组成的数组, [options], [task])

gulp插件

我们要处理文件的合并、压缩等操作，接口中没有提供，都放在了插件中

# 下载插件：
npm install 插件名 --save-dev

  • gulp-concat : 合并文件(js/css)

  • gulp-uglify : 压缩js文件

  • gulp-rename : 文件重命名

  • gulp-less : 编译less

  • gulp-sass：编译sass

  • gulp-clean-css : 压缩css

  • gulp-htmlmin：压缩html文件

  • gulp-load-plugins：打包插件

  • gulp-autoprefixer：给css加前缀

  • ES6转ES5

    • gulp-babel@7.0.1

    • babel-core

    • babel-preset-es2015

  • gulp-clean：清空目标文件夹

  • gulp-webserver：启动一个服务器

  • gulp-connect：热加载，配置一个服务器

  • open：自动打开浏览器

  • gulp-imagemin：压缩图片

  • gulp-file-include：gulp打包组件

项目中下载多个插件

cnpm i gulp-concat gulp-uglify gulp-rename gulp-sass gulp-clean-css gulp-htmlmin gulp-webserver gulp-load-plugins gulp-autoprefixer gulp-babel@7.0.1 babel-core babel-preset-es2015 gulp-clean -D

全自动化构建项目

该项目中使用了大部分能够用到的插件，还有部分插件没有用到，如在项目中有其他插件的需求，可以去www.npmjs.com搜索相关插件的使用

目录结构

image.png

gulpfile.js代码

// 全自动化构建项目
const { src, dest, parallel, series, watch } = require("gulp");
const _ = require("gulp-load-plugins")();

// 定义html任务
function handlerHtml(cb) {
    src('./src/*.html')
        .pipe(_.fileInclude({ // 根据配置导入对应的 html 片段
            prefix: '@@',   // 自定义的一个标识符
            basepath: './src/components'   // 基准目录, 组件文件所在目录路径
        }))
        .pipe(_.htmlmin({ collapseWhitespace: true })) // 为true是去掉空格和换行符
        .pipe(dest('./dist/'))
    cb();
}
// 定义css任务
function handlerCss(cb) {
    src('./src/assets/sass/*.scss')
        .pipe(_.sass())     // 将sass文件转换为 css文件 
        .pipe(_.autoprefixer()) // 给css加前缀，在package.json中配置
        .pipe(_.cleanCss()) // 压缩css文件
        .pipe(_.rename({ extname: ".min.css" }))  // 重命名文件
        .pipe(dest('./dist/css/'))
    cb();
}
// 定义js任务
function handlerJs(cb) {
    src('./src/assets/js/*.js')
        .pipe(_.babel({ presets: ['es2015'] }))  // 将ES6以上的语法转换为ES5的语法
        .pipe(_.uglify())   // 将js压缩
        .pipe(_.rename({ extname: ".min.js" })) // 重命名文件
        .pipe(dest('./dist/js/'))
    cb();
}

// 定义压缩图片和字体
function handlerImg(cb) {
    src('./src/assets/image/*.*')
        .pipe(_.imagemin())
        .pipe(dest('./dist/img'))
    cb()
}

// 定义监听文件变化任务
function listenerFile(cb) {
    watch(['./src/*.html', './src/components/*.html'], { ignoreInitial: false }, handlerHtml);
    watch('./src/assets/sass/*.scss', { ignoreInitial: false }, handlerCss);
    watch('./src/assets/js/*.js', { ignoreInitial: false }, handlerJs);
    cb();
}

// 创建服务器
function server(cb) {
    src('./dist', { allowEmpty: true })
        .pipe(_.webserver({
            livereload: true, // 是否自动刷新
            host: "localhost", // 设置域名
            port: 8888, // 设置端口
            open: true, // 自动打开游览器
            fallback: "index.html", // 默认打开的页面
            proxies: [  // 配置代理,可以配置多项
                {
                    source: '/runoob', // 自定义地址-菜鸟
                    target: 'https://www.runoob.com/' //代理的目标地址
                },
                {
                    source: '/baidu', // 自定义地址-百度
                    target: 'https://www.baidu.com/' //代理的目标地址
                }
            ]
        }))

    cb();
}
// 导出任务
exports.default = series(parallel(handlerHtml, handlerCss, handlerJs, handlerImg), listenerFile, server);

package.json代码

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {	//开发依赖，项目中请把注释去掉
    "babel-core": "^6.26.3",
    "babel-preset-es2015": "^6.24.1",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^8.0.0",
    "gulp-babel": "^7.0.1",
    "gulp-clean": "^0.4.0",
    "gulp-clean-css": "^4.3.0",
    "gulp-concat": "^2.6.1",
    "gulp-file-include": "^2.3.0",
    "gulp-htmlmin": "^5.0.1",
    "gulp-imagemin": "^7.1.0",
    "gulp-load-plugins": "^2.0.7",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^4.1.0",
    "gulp-uglify": "^3.0.2",
    "gulp-webserver": "^0.9.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "browserslist": [	//css兼容版本信息，项目中请把注释去掉
    "FireFox > 2",
    "IOS > 3",
    "IE > 7",
    "chrome > 5",
    "last 3 version"
  ]
}

在项目开发过程中使用这套配置，查看效果时会很慢，这时我们可以把管道压缩去掉，提高我们查看效果的速度

avatar
文章
阅读
粉丝