Gulp的安装和使用

gulp的用途

gulp是基于node平台开发的前端构建工具。

gulp是一个JavaScript程序，并且它的指令使用的也是JavaScript语言，所以gulp通常是前端开发人员自动化处理日常任务的首选工具。

• gulp可以处理日常工作流产生的任务（作用）：
  • 项目上线时对HTML、CSS、JavaScript文件合并、压缩。
  • 将ES6语法转换为ES5语法以便代码在较旧的浏览器中运行。
  • gulp允许开发者将机械化的操作编写成任务，在命令行输入相关的任务名称就能执行机械化操作，从而提高开发效率。(用机器代替手工，提高开发效率)

1.gulp的使用

1. 使用npm install gulp-cli –g 下载gulp的命令行工具

2. 使用npm install gulp@4.0.2 --save-dev 下载gulp库文件

3. 在项目根目录下建立gulpfile.js（不可更改）文件

4. 重构项目的文件夹结构 src目录放置源代码文件 ，dist目录放置构建后文件

5. 在gulpfile.js文件中编写任务

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

6. 在命令行工具中执行gulp任务

2. gulp的插件使用

步骤：

1. 下载 npm install 插件名
2. 引用 const 名称 = require('插件名')
3. 调用
4. 终端执行

提示：

• 直接使用node+文件名 执行的是整个文件

• 这里，只需要执行单个的任务

  gulp 任务名
  

2.1 html任务

1. 抽取html文件中的公共代码gulp-file-include
2. html文件中代码的压缩操作gulp-htmlmin
3. 安装包

// html文件压缩
npm install gulp-htmlmin
// 公共文件包含
npm install gulp-file-include

• 使用gulp-file-include抽取html文件中的公共代码

1. 先把头部公共部分的代码剪切放在src文件夹下面的common文件夹下面的header.html文件中

@@include()语法是由gulp-file-include插件提供的，小括号中是代码片段的路径以及文件的名字。

2. 在原文件中（article.html）使用@@include('./common/header.html')小括号里面存放路径

// 引用gulp模块
const gulp = require('gulp')
// 引用gulp-htmlmin插件
const htmlmin = require('gulp-htmlmin')
// 引用gulp-file-include插件
const fileinclude = require('gulp-file-include');

gulp.task('htmlmin', callback => {
    gulp.src('./src/*.html')
        // 抽取html文件中的公共代码
        .pipe(fileinclude())
        // 压缩html文件中的代码
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest('dist'))
    callback();
})

终端执行：

gulp htmlmin

2.2 css任务

1. less语法转换gulp-less
2. css代码压缩gulp-csso
3. 安装包

// less语法
npm install gulp-less
// css代码压缩
npm install gulp-csso

// 引用gulp模块
const gulp = require('gulp')
// 引用gulp-less插件
const less = require('gulp-less');
// 引用gulp-csso插件
const csso = require('gulp-csso');

gulp.task('cssmin', callback => {
    // 获取文件（后缀为.less和.css）
    gulp.src(['./src/css/*.less', './src/css/*.css'])
        // 将less语法转换为css语法
        .pipe(less())
        // 将css代码进行压缩
        .pipe(csso())
        // 将处理的结果进行输出
        .pipe(gulp.dest('dist/css'))
    callback();
})

终端执行：

gulp cssmin

2.3 js任务

1. es6代码转换gulp-babel
2. 代码压缩gulp-babel
3. 安装包

// 下载安装gulp-babel插件，实现ES6语法的转换
npm install gulp-babel @babel/core @babel/preset-env
// 下载安装gulp-uglify插件
npm install gulp-uglify

// 引用gulp模块
const gulp = require('gulp')
// 引用gulp-babel插件
const babel = require('gulp-babel');
// 引用gulp-uglify插件
const uglify = require('gulp-uglify');

gulp.task('jsmin', callback => {
    gulp.src('./src/js/*.js')
        .pipe(babel({
            presets: ['@babel/env']
        }))
        // 将js代码进行压缩
        .pipe(uglify())
        // 将处理的结果进行输出
        .pipe(gulp.dest('dist/js'))
    callback();
})

终端执行：

gulp jsmin

2.4 复制文件

// 引用gulp模块
const gulp = require('gulp')

// 复制文件夹
gulp.task('copy', callback => {
    //获取文件
    gulp.src('./src/images/*')
    	//文件输出
        .pipe(gulp.dest('dist/images'))
    //获取文件
    gulp.src('./src/lib/*')
    	//文件输出
        .pipe(gulp.dest('dist/lib'))
    callback();
})

终端执行：

gulp copy

2.5 执行全部构建任务

// 构建任务
// 使用gulp.series方法
gulp.task('default', gulp.series('htmlmin', 'cssmin', 'jsmin', 'copy'))

终端执行：

gulp default