首页 > 编程学习 > node.js 使用教程-2.Gulp 打包构建入门与使用

前言

gulp 是一个前端项目开发的自动化打包构建工具, 类似的打包工具还有webpack。
前端开发的过程中,会写到 js 文件,css 文件,我们的项目如果想上线,那么一定要体积小一点,就需要对原始的代码进行编译压缩。

环境准备

gulp 是基于node 运行的,使用npm 全局安装

npm install -g gulp 

安装gulp依赖包,因为在上线后是不需要这个包的,所以将这个项目安装在开发依赖:

npm install gulp --save-dev

安装完成会生成一个package-lock.json文件

查看版本

> gulp -v
CLI version: 2.3.0
Local version: 4.0.2

安装压缩文件的组件

npm install gulp-uglify

项目初始化

创建项目

web
  └─dist
  └─src
      ├─css
      ├─js
          └─main.js
      └─index.html
  └─gulpfile.js
  └─package.json

初始化项目生成package.json 文件,是npm的配置文件。

npm init -y

package.json内容

gulpfile.js 文件需要自己在项目根目录下新建,整个目录结构如下

使用 gulp 压缩 JS

压缩 js 代码可降低 js 文件大小,提高页面打开速度。在不利用 gulp 时我们需要通过各种工具手动完成压缩工作。
所有的 gulp 代码编写都可以看做是将规律转化为代码的过程。
在 gulpfile.js 中编写代码

var gulp = require('gulp');       // 导入gulp
var uglify = require('gulp-uglify'); // 导入gulp-uglify


// 创建压缩任务
gulp.task('js', function() {
  // 1. 找到文件
  gulp.src('src/js/*.js')
  // 2. uglify压缩
      .pipe(uglify())
  // 3. 另存到dist压缩后的文件
      .pipe(gulp.dest('dist/js'))
})

执行命令

> gulp js

src/js/ext.js 原始的代码如下


压缩后的代码

gulp 是基于任务来完成构建的,通过gulp.task() 创建一个任务

  • gulp.task(name, fn) - 定义任务,第一个参数是任务名,第二个参数是任务内容。
  • gulp.src(path) - 选择文件,传入参数是文件路径。
  • gulp.dest(path) - 是指输出到哪个目录下,如果没有这个目录存在会自动创建这个目录
  • gulp.pipe() - 管道,你可以暂时将 pipe 理解为将操作加入执行队列

上面的任务就是把 'src/js/' 目录下所有的 .js 文件压缩后放到 dist/js 目录。

异步执行

前面我们在执行任务的时候,会有个红色提示语

The following tasks did not complete: js
Did you forget to signal async completion?


这是因为我们下载的是gulp4的版本,网上看到大部分教程是gulp3的版本语法,版本问题是很大的一个坑。

使用异步函数 async 和 await

var gulp = require('gulp');       // 导入gulp
var uglify = require('gulp-uglify'); // 导入gulp-uglify


// 创建压缩任务
gulp.task('js', async () => {
  // 1. 找到文件
  gulp.src('src/js/*.js')
  // 2. uglify压缩
      .pipe(uglify())
  // 3. 另存到dist压缩后的文件
      .pipe(gulp.dest('dist/js'))
})

default 默认任务

如果有些文件不做任何处理,直接负责到dist目录,比如把html文件复制到dist目录

gulp.task('html', async () =>{
  gulp.src('src/*.html')
      .pipe(gulp.dest('dist'));
});

当任务越来越多的时候,希望能一次执行多个任务,于是就有个default 默认任务来管理

// 配置 default 默认任务
gulp.task('default', ['js', 'html']);

执行的时候只需输入

gulp

执行后会发现报错Task function must be specified

PS D:\code\web> gulp
AssertionError [ERR_ASSERTION]: Task function must be specified
    at Gulp.set [as _setTask] (D:\code\web\node_modules\undertaker\lib\set-task.js:10:3)
    at Gulp.task (D:\code\web\node_modules\undertaker\lib\task.js:13:8)
    at Object.<anonymous> (D:\code\web\gulpfile.js:31:6)
    at Module._compile (internal/modules/cjs/loader.js:1138:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at requireOrImport (C:\Users\dell\AppData\Roaming\npm\node_modules\gulp\node_modules\gulp-cli\lib\shared\require-or-import.js:19:11) {
  generatedMessage: false,
  code: 'ERR_ASSERTION',
  actual: false,
  expected: true,
  operator: '=='
}

因为我们用的是gulp版本是v4.0.2,跟以前的语法有一些不一样了
原先的gulp3声明方式:

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

改成现在的gulp4版本

gulp.task('default', gulp.series(['js', 'html']));

于是只需要执行gulp目录就可以执行全部了

Copyright © 2010-2022 mfbz.cn 版权所有 |关于我们| 联系方式|豫ICP备15888888号