正文

node.js使用教程-2.gulp打包构建入门与使用(代码片段)

上海-悠悠  上海-悠悠  2022-12-04  555

关键词：

前言

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目录就可以执行全部了

node.js入门02：包管理器npm(代码片段)

...装模块查看已安装模块更新模块删除模块npx版本控制换源使用nrm工具换源使用cnpm代替npm总结目的目前的Node.js安装包中都带有一个重要的工具包管理器npm。npm主要有两方面功能：下载管理第三方模块；构建与运行项目。npm... 查看详情

前端涨薪必读，node.js入门保姆级教程(代码片段)

Node.js保姆级教程1.Node基本概念2.第一个node.js程序3.node创建get请求4.node创建post请求1.Node基本概念1.1node.js是什么?平常的js代码只能在浏览器运行，浏览器一关，就完犊子Node.js就是运行在服务端的JavaScript。1.2客户端与服务端... 查看详情

前端涨薪必读，node.js入门保姆级教程(代码片段)

esp保姆级教程疯狂node.js服务器篇——使用pkg打包nodejs应用，一次打包，到处运行

忘记过去，超越自己❤️博客主页单片机菜鸟哥，一个野生非专业硬件IOT爱好者❤️❤️本篇创建记录2022-08-10❤️❤️本篇更新记录2022-08-10❤️ 查看详情

gulp使用

卸载插件：npmuninstall<name>[--save-dev]使用npm更新插件：npmupdate<name>[--save-dev]更新全部插件：npmupdate[--save-dev]当前目录已安装插件：npmlist1.node.js安装node-v（版本号即为正确安装）npm-v（版本号即为正确安装）2.gulp全局npminstal... 查看详情

node.js入门01：基础使用与说明(代码片段)

文章目录前言下载与安装入门使用运行JavaScript代码简单的web服务器示例内置功能调试代码异步操作与事件循环为什么需要异步操作实现自己的异步操作事件循环总结前言传统的来说JavaScript是运行在浏览器中的网页上的脚本语言&... 查看详情

jenkins入门教程(代码片段)

　　jenkins是一个广泛用于持续构建的可视化web工具，持续构建说得更直白点，就是各种项目的"自动化"编译、打包、分发部署。jenkins可以很好的支持各种语言（比如：java,c#,php等）的项目构建，也完全兼容ant、maven、gradle等多种... 查看详情

如何将 Mongoose/Mongodb 与 node.js- 护照身份验证一起使用

】如何将Mongoose/Mongodb与node.js-护照身份验证一起使用【英文标题】：HowtouseMongoose/Mongodbwithnode.js-passportauthentication【发布时间】：2022-01-0814:22:48【问题描述】：我正在构建我的第一个全栈node.js应用程序，我想使用护照进行身份验... 查看详情

Node.js：req.params 与 req.body

...同教程的代码，用MEAN堆栈构建一个基本的todo应用程序，使用node、express、angular和mongodb。一个教程涵盖了为GET、POST和DELETE操作创建api，但忽略了POST。因此，我将编写一个更新现有查看详情

使用带有通知程序的 pkg 构建 node.js 可执行文件

】使用带有通知程序的pkg构建node.js可执行文件【英文标题】：Buildnode.jsexecutableusingpkgwithnotifier【发布时间】：2020-07-2019:00:49【问题描述】：我正在使用pkg将我的节点应用程序打包到.exe中，它运行良好。我遇到的问题是模块notifie... 查看详情

vue.js简介与入门指南(代码片段)

...用程序。Vue.js受到了许多开发者的欢迎，因为它允许使用简单的HTML模板来创建可重用的组件，这些组件可以轻松地组合在一起以构建更大的应用程序。Vue.js也有一个非常强大的生态系统，可以与许多第三方库和工具... 查看详情

node.js实战之node多进程与jxcore打包深入运用(代码片段)

...解压目录中提供了JX二进制文件命令。接下来，我们主要使用这个命令。Linux/OSX安装命令：$curlhttps://raw.githubusercontent.com/jxco 查看详情

创业笔记-node.js入门之javascript与node.js

JavaScript与Node.jsJavaScript与你抛开技术，我们先来聊聊你以及你和JavaScript的关系。本章的主要目的是想让你看看，对你而言是否有必要继续阅读后续章节的内容。如果你和我一样，那么你很早就开始利用HTML进行“开发”，... 查看详情

前端涨薪必读，node.js入门保姆级教程(代码片段)

...务端发送请求服务端去数据库查询数据服务端返回给前端使用I/O:input(输入),往磁盘存数据，Output(输出)从磁盘中取数据1.如何优化整个交互过程？咱们的响应速度可以加快，比如去银行办业务，平时办业务要半个小... 查看详情

gitbook入门教程之gitbook简介(代码片段)

gitBook是一个基于node.js的命令行工具,使用github/git和markdown/asciiDoc构建精美的电子书.gitbook支持输出静态网页和电子书等多种格式,其中默认输出静态网页格式.gitbook不仅支持本地构建电子书,而且可以托管在gitbook官网上,并享受在线... 查看详情

node.js入门03：模块化规范commonjs与esmodule(代码片段)

文章目录目的CommonJS基础使用module对象require()方法ESModule混合使用总结目的传统的用在网页中的JavaScript代码文件与文件之中的内容都是全局相互可见的，这对于大型项目特别是多人合作的项目来说挺不好的，容易互相影响... 查看详情

PURE node.js 有教程吗？ [复制]

...到关于node的书，我意识到在我学到一些东西之前我必须使用express.js模块。有一个教程或一本书教如何创建纯node.jsWeb应用程序，没有任何节点打包模块（npm）？因为一开始想学纯node 查看详情

tauri入门教程(代码片段)

...并不呈现实际的应用程序界面；相反，它会启动使用操作系统提供的WebView库的子进程，从而可以使用Web技术构建Tauri应用程序。与Electron不同，它使用Chromium引擎打包和呈现您的应用程序，而不管底层操作系统... 查看详情