一天搞定前端必备开发技能 (3)——自动化构建工具gulp

    gulp 是一个自动化构建工具，它使用 Node.js 编写，主要用于前端开发过程中的自动化任务。gulp 的核心功能是能够快速地执行常见的任务，如压缩 JavaScript 代码、编译 Sass 样式表、合并文件、优化图片等。接下来让我们开启gulp的学习之旅吧🥳！！！

---

gulp环境构建

​ gulp的构建依旧是需要在node.js环境之下来进行构建，而且要注意的是node的版本要求最低8.0以上的版本。

​ 打开cmd，输出以下指令全局安装gulp：

npm install -global gulp-cli gulp

安装完成之后，我们需要通过以下指令来检验是否安装成功：

gulp -v

如果返回的是gulp版本信息，那就代表安装成功啦😆

创建项目初始化gulp

打开Vs code的终端，使用命令：

mkdir gulpDemo // 创建⽬录
cd gulpDemo // 进⼊⽬录
npm init // 初始化

在初始化阶段一直回车即可：

就会发现一个package.json文件，这个文件作用是标注了信息，让开发者打开文件能更好的了解项目。

安装gulp项目依赖

安装gulp项目依赖，所谓项⽬依赖就是当前项⽬⽬录下需要单独安装。依旧是在终端中使用以下命令：

npm install --save-dev gulp

出现了node_modules文件就表示创建成功🥳

在项⽬的根⽬录下，创建⼀个名字为gulpfile.js的⽂件,添加⼀个默认任务

在项目的根目录下，创建一个名字为gulpfile.js的文件，添加一个默认任务。

function defaultTask(cb) {
 // place code for your default task here
 cb();
}
exports.default = defaultTask

这个gulpfile.js文件就相当于gulp的描述文件，所有的gulp功能都在这里记录。这个文件的作用在日后的工作中可以：完成压缩文件、合并文件，日常的一些重复操作的劳动。

运行gulp

最后是运行gulp，我们只需要在刚刚打开的vscode终端中输入gulp即可开始运行。

gulp

---

创建gulp任务

gulp最常见的任务就是压缩、合并、重命名等任务。接下来我们一次来看一些这些任务如何创建。

我们在来回顾一下上面创建gulp文件步骤：

1. 初始化项目npm init
2. 安装gulp依赖
3. 新建gulpfile.js文件

到此为止，我们整个gulp文件就创建完成了

压缩CSS文件

1. 安装依赖

   npm install --save gulp-minify-css
   

同样的，我们可以去package.json文件中查看是否有安装的依赖。

2. 创建任务

我们要打开gulpfile.js文件中编写任务：

• 首先引入gulp

  const gulp = require("gulp")
  const minifyCSS = require("gulp-minify-css")
  

• 之后引入刚刚安装的CSS依赖

  function 方法名(cd){
  	gulp.src("被操作文件的路径")
  	.pipe(minifyCSS())		//执行压缩任务函数
  	.pipe(gulp.dest("选择输出的路径"))		//输出任务
  	cd()
  }
  gulp.task("defalut",方法名)	//执行任务
  

• 最后在终端运行gulp，就会执行压缩操作了

压缩JS文件

1. 安装依赖

   npm install --save gulp-uglify
   

2. 创建任务

   const gulp = require("gulp")
   const uglify = require('gulp-uglify')
   
   function 方法名(cb){
       gulp.src("被操作文件的路径")
       .pipe(uglify())		//执行压缩任务函数
       .pipe(gulp.dest("选择输出的路径"))		//输出任务
       cb();
   }
   gulp.task("default",方法名);	//执行任务
   

   因为创建任务和CSS的步骤是一致的，只不过是有一些名字上的区别，所以这里就没有过多的讲解啦，直接放上了整个的代码，大家可以参考参考💪⛽️。

3. 最后也是一样在终端运行gulp，就会执行压缩操作了

总结

gulp执行任务的步骤主要总结为以下几点：

1. 安装对应的依赖。
2. 在gulpfile.js文件中导入依赖。
3. 在gulpfile.js文件中定义操作方法。
   1. 首先gulp.src("被操作文件的路径")指定需要被执行任务的操作路径。
   2. 之后执行压缩任务函数.pipe(uglify())
   3. 然后指定输入路径.pipe(gulp.dest("选择输出的路径"))
   4. 最后在方法外执行我们定义的任务gulp.task("default",方法名);
4. 运行gulp执行操作。

---

合并任务

在 Gulp 中，合并任务通常指的是将多个文件合并成一个文件的操作，这在前端开发中非常常见，尤其是在处理 JavaScript 或 CSS 文件时。合并可以减少 HTTP 请求的数量，从而提高页面加载速度。

将任务函数和/或组合操作组合成更⼤的操作，这些操作将按顺序依次执⾏。对于使⽤ series()组合操作的嵌套深度没有强制限制。以下是如何在 Gulp 中创建合并任务的步骤：

1. 安装重命名和合并操作的依赖

   npm i --save gulp--rename gulp--concat
   

   注意：

   gulp-concat 是一个 Gulp 插件，它的作用是将多个文件合并成一个文件。这个插件特别适用于前端开发中，当你需要将多个 JavaScript 或 CSS 文件合并成一个单一的文件以减少 HTTP 请求数量，从而提高页面加载速度时。

2. 创建任务：创建任务的步骤一上述一致的。

   const gulp = require("gulp")	//1.引入gulp
   const { series } = require('gulp');		//2.使⽤series()组合操作
   
   const uglify = require('gulp-uglify')		//3.引入gulp
   const minifyCSS = require("gulp-minify-css")	//3.引入gulp
   const rename = require("gulp-rename")		//3.引入gulp
   const concat = require("gulp-concat")		//3.引入gulp
   
   function 操作JS方法名(cb){
       gulp.src("被操作JS文件的路径")
       .pipe(uglify())		//执行压缩任务函数
       .pipe(gulp.dest("选择输出的路径"))		//输出任务
       cb();
   }
   
   function 操作CSS方法名(cd){
   	gulp.src("被操作CSS文件的路径")
   	.pipe(minifyCSS())		//执行压缩任务函数
   	.pipe(gulp.dest("选择输出的路径"))		//输出任务
   	cd()
   }
   
   //执行任务
       async function finalFile(){
        await gulp.src('./src/js/*.js')	//选择合并的JS
        .pipe(concat("app.js")) //合并js
        .pipe(gulp.dest('./dist/js'))		//输出
        .pipe(rename({suffix:'.min'}))		//重命名
        .pipe(uglify()) //压缩
        .pipe(gulp.dest('./dist/js')) 
       }
       
   function finalFile(cd) {
   	gulp.src('被操作JS文件的路径')
       .pipe(concat('合并文件的名称'.js')) 	// 合并成一个JS文件
       .pipe(gulp.dest('选择输出的路径')) 	// 输出合并后的文件
       .pipe(rename({ suffix: '.min' })) 	// 重命名，添加 .min 后缀
       .pipe(uglify()) // 压缩
       .pipe(gulp.dest('选择输出的路径'));		// 输出压缩后的文件
   }
   
   gulp.task("default",finalFile());
   

   

   注意：

   suffix 属性的作用是向原始文件名的末尾添加指定的后缀。