Gulp 学习笔记

╰+哭是因爲堅強的太久メ 2023-02-20 13:41 1阅读 0赞

### 目录 ###

*   *   *  1. 什么是Gulp？
         *  2. Gulp的基本使用
         *   *  2.1 使用步骤
             *  2.2 Gulp方法
             *  2.3 第三方插件
         *  3. Webpack和Gulp的区别

### 1. 什么是Gulp？ ###

**概念：** Gulp是基于Node平台开发的前端自动化构建工具。将机械化的操作编写成任务，在需要执行机械化操作时，执行一个命令行任务就可以自动执行了。

**作用：** 那Gulp能做什么呢？

*  项目上线，HTML、CSS、JS文件的压缩、合并、重命名
 *  语法的转化（ES6、Less、Scss等）
 *  公共文件的抽离
 *  修改文件浏览器的自动化刷新

### 2. Gulp的基本使用 ###

#### 2.1 使用步骤 ####

Gulp的基本使用步骤：

*  安装gulp的库文件: `npm install gulp`
 *  在项目的根目录创建配置文件：`gulpfile.js`
 *  调整项目的文件夹结构：src目录放源代码文件，dist目录放构建后的文件
 *  在`gulpfile.js`文件中编写任务
 *  在命令行工具中执行任务

#### 2.2 Gulp方法 ####

下面来看一下Gulp中提供的方法：

*  gulp.src()：获取任务要处理的文件
 *  gulp.dest()： 输出文件
 *  gulp.task()：建立Gulp任务
 *  gulp.watch()：监控文件的变化

// 创建任务
    const gulp = require('gulp')
    
    gulp.task('task', () => { 
       // 获取要处理的文件
       gulp.src('./src/css/base.css')
       // 将要处理的文件输出到dist目录
       .pipe(gulp.dest('./dist/css'))
    })
    
    
    // 执行任务
    gulp task

以上就是gulp提供的方法，以及方法的使用步骤。

#### 2.3 第三方插件 ####

那我们上面也说了，gulp还可以提供像代码压缩，代码打包等任务，那他们是怎么实现的呢？实际上，这些功能的实现是需要依赖第三方插件的，下面看一些几个常见的插件：

*  `gulp-htmlmin` ：html文件压缩
 *  `gulp-csso` ：压缩css
 *  `gulp-babel` ：JavaScript语法转化
 *  `gulp-less`: less语法转化
 *  `gulp-uglify` ：压缩混淆JavaScript
 *  `gulp-file-include` 公共文件包含
 *  `browsersync` 浏览器实时同步
 *  `gulp-ruby-sass`：Sass编译
 *  `gulp-autoprefixer`：自动修复程序
 *  `gulp-jshint`：JSHint代码规范
 *  `gulp-concat`：合并文件，CSS或JS
 *  `gulp-imagemin`'：压缩图片
 *  `gulp-cache`缓存处理
 *  `gulp-livereload`：实时刷新
 *  `gulp-notify`：文件修改通知
 *  `del`：清理文件

这些插件的基本使用方法就是：

*  安装插件
 *  引入插件
 *  调用插件

**HTML文件操作任务：**

下面我们使用Gulp的插件完成HTML文件的公共部分抽离以及文件的压缩操作：

// 1. 下载安装插件
    npm install gulp-htmlmin
    npm install gulp-file-include
    // 2. 引用插件
    const htmlmin = require('gulp-htmlmin')
    const fileinclude = require('gulp-file-include')
    // 3. 使用插件
    gulp.task('htmlmin', () => { 
       // 获取要处理的文件（这里*是指所有的HTML文件）
       gulp.src('./src/*.html')
       // 创建抽离公共代码的任务
       .pipe(fileinclude())
       // 创建压缩HTML文件的任务
       .pipe(htmlmin({  collapseWhitespace: true })
       // 将处理的文件输出到dist目录
       .pipe(gulp.dest('./dist'))
    })
    // 4. 执行任务
    gulp htmlmin

需要注意的是，task中的任务执行是有顺序的。抽取公共代码的任务需要在压缩文件之前进行。

**CSS文件操作任务：**

使用Gulp的插件，将less文件转化成less，并对css文件进行压缩操作：

npm install gulp-less
    npm install gulp-csso 
    
    const less = require('gulp-less')
    gulp.task('cssmin', () => { 
       // 获取要处理的文件（这里*是指所有的Less文件）
       gulp.src(['./src/css/*.less', './src/css/*.css'])
       // 创建将Less转化成css的任务
       .pipe(less())
       // 创建css文件压缩的任务
       .pipe(csso())
       // 将处理的文件输出到dist目录
       .pipe(gulp.dest('./dist/css'))
    })

注意：如果引入的路径有多个，可以使用数组来操作。

**JavaScript文件操作任务：**

下面来实现一下ES6打码的转换以及JavaScript文件的压缩操作：

// 这里babel插件后面的两个是babel的依赖
    npm install gulp-babel @babel/core @babel/preset-env
    npm install gulp-uglify
    
    const babel = require('gulp-babel')
    const uglify = require('gulp-uglify')
    
    gulp.task('jsmin', () => { 
       // 获取要处理的文件（这里*是指所有的js文件）
       gulp.src( './src/js/*.js')
       // 创建js文件语法转化的任务
       .pipe(babel({ 
       //他可以判断当前代码的运行环境，将代码转化为当前运行环境支持的代码
          presets: ['@babel/env']
       }))
       // 将js文件进行压缩处理
       .pipe(uglify())
       // 将处理的文件输出到dist目录
       .pipe(gulp.dest('./dist/js'))
    })

**复制文件夹操作：**

对于源代码文件中的images等文件，我们需要直接拷贝到dist目录中，这里创建一个文件夹复制的任务。

gulp.task('copy', () => { 
       // 获取要处理的文件（这里*是指所有的图片文件）
       gulp.src( './src/images/*')
       // 将处理的文件输出到dist目录
       .pipe(gulp.dest('./dist/images'))
    
       gulp.src( './src/lib/*')
       .pipe(gulp.dest('./dist/lib'))
    })

**构建任务：**

上面已经创建了四个任务，我们可以创建一个构建任务，一次性的执行上面的四个任务：

gulp.task('default', ['htmlmin', 'cssmin', 'jsmin', 'copy'])
    
    // 执行任务
    gulp default
    // 也可以直接执行gulp，因为默认名称是default，所以执行gulp就会去找名称为default的任务
    gulp

执行default任务之后，就会依次执行以上四个任务。

### 3. Webpack和Gulp的区别 ###

gulp是工具链，构建工具，可以配合各种插件做JS压缩，CSS压缩，less编译替代手动实现自动化工作。

所以它的主要作用是：

*  构建工具
 *  自动化
 *  提高效率，优化前端工作流程

webpack是文件打包工具，可以把项目的各种js文件，css文件等打包合成一个或多个文件，主要用于模块化方案，预编译模块的方案。

所以它的主要作用是：

*  打包工具
 *  模块化识别
 *  编译模块代码方案