gulp的安装及使用教程

简介

gulp是用JavaScript语言编写的运行在node.js平台开发的前端构建工具，

gulp可以处理日常工作流产生的任务（作用）：

• 项目上线时对HTML、CSS、JavaScript文件合并、压缩。

• 将ES6语法转换为ES5语法以便代码在较旧的浏览器中运行。

允许开发者将机械化的操作编写成任务，在命令行输入相关任务名称就能执行机械化操作，从而提高开发效率

安装步骤

1. 全局安装gulp-cli

gulp-cli是gulp的命令行工具，需要全局安装，用于启动各个项目中的本地gulp

首先通过npm工具下载安装gulp-cli工具，命令如下：

npm install gulp-cli@2.3.0 -g

然后打开命令行工具，运行“gulp -v”命令，如果安装成功则显示如下：

2.在项目中安装gulp

本地gulp的作用：

• 加载和运行gulpfile中的构建指令

• 暴露API供gulpfile使用

先在一个目录下创建一个文件作为项目根目录，然后在这个目录下打开cmd命令行工具进行npm初始化，命令如下

npm init

完成以后会自动创建一个package.json文件

然后进行局部安装gulp，这一步我是在vscode里面做的，然后输入命令出现以下内容

 npm install gulp@4.0.2 --save-dev

这时根目录会生成一个node_modoule目录和一个package-lock.json文件

安装完成后再次在命令行工具中输入“gulp -v”命令，检查gulp版本发现已经识别出本地gulp

3.构建项目

安装成功后在根目录中建立一个gulpfile.js文件，注意这个文件名不能随意更改，此时目录结构如下：

然后在gulpfile.js文件里编写构建项目的任务，代码如下（这步操作是将src目录下的base.css文件复制到dist\css目录下）

const gulp = require('gulp')
gulp.task('first',callback => {
    console.log('第一个gulp任务执行了');
    gulp.src('./src/css/base.css')
    .pipe(gulp.dest('./dist/css'));
    callback();
});

然后在命令行工具中执行gulp任务，在命令行输入gulp first命令运行，出现结果如下所示

成功后我们会在dist\css目录下看到已经被复制的base.js文件

在项目中使用gulp

gulp中的常用插件

• gulp-htmlmin ：html文件压缩

• gulp-csso ：压缩css

• gulp-babel ：JavaScript语法转化

• gulp-less: less语法转化

• gulp-uglify ：压缩混淆JavaScript

• gulp-file-include 公共文件包含

• browsersync 浏览器实时同步

插件的使用通常分为3步：下载、引用和调用插件，需要注意的是在引用插件之前，一定要先引用gulp模块。

压缩并抽取HTML中的公共代码

先下载插件，命令如下：

npm install gulp-htmlmin

npm install gulp-file-include

然后在gulpfile.js里放入如下代码：

const gulp = require('gulp')
// 引入htmlmin插件
const htmlmin = require("gulp-htmlmin");
// 引入gulp-file-include
const fileInclude = require("gulp-file-include");
gulp.task("first", callback => {
  gulp.src("./src/css/base.css")
    .pipe(gulp.dest("./dist/css"));
  callback();
});
// 建立任务
gulp.task('htmlmin',callback => {
  gulp.src('./src/*.html')
  .pipe(fileInclude())
  .pipe(htmlmin({
    collapseWhitespace:true
  }))
  .pipe(gulp.dest('./dist'))
  callback()
})

在src下的文件夹里找到default.html和article.html这两个文件，并把这两个文件里的头部框架剪切，然后在src目录下新建一个common文件夹，在文件夹里新建一个header.html文件，并把我们刚才剪切的代码放进去，然后在default.html和article.html这两个文件里剪切的地方输入以下代码

@@include('./common/header.html')

最后在终端输入“gulp htmlmin”得到如下结果

压缩并转换Less语法

先下载插件，命令如下：

npm install gulp-less

npm install gulp-csso

然后在gulpfile.js里放入如下代码：

const gulp = require('gulp')
// 引入htmlmin插件
const htmlmin = require("gulp-htmlmin");
// 引入gulp-file-include
const fileInclude = require("gulp-file-include");
//引用 gulp-less
const less = require('gulp-less')
//引用gulp-csso
const cssmin = require('gulp-csso');
const { gracefulify } = require('graceful-fs');
const csso = require('gulp-csso');
gulp.task("first", callback => {
  gulp.src("./src/css/base.css")
    .pipe(gulp.dest("./dist/css"));
  callback();
});
// 建立任务
gulp.task('htmlmin',callback => {
  gulp.src('./src/*.html')
  .pipe(fileInclude())
  .pipe(htmlmin({
    collapseWhitespace:true
  }))
  .pipe(gulp.dest('./dist'))
  callback()
})
//建立任务
gulp.task('cssmin',callback => {
  gulp.src(['./src/css/*.css','./src/css/*.less'])
  .pipe(less())
  .pipe(cssmin())
  .pipe(gulp.dest('./dist/css'))
  callback()
})

接着在css下创建一个a.less文件放入如下代码

.father {
    background-color: rgb(122, 227, 123);
    font-size: 16px;
    
    .son {
     font-weight: bold;
    }
    }

去终端输入“gulp cssmin ”得到如下结果就成功喽

压缩并转换ES6语法

先下载插件，命令如下：

npm install gulp-babel @babel/core @babel/preset-env

npm install gulp-uglify

然后在gulpfile.js里继续加入如下代码：

2.// 引入gulp-babel插件
const babel = require('gulp-babel')
// 引入gulp-uglify插件
const uglify = require('gulp-uglify')
3.// 建立任务：转换ES6语法，压缩js文件
gulp.task('jsmin', callback => {
    // 获取文件.js
    gulp.src('./src/js/*.js')
        // 转换es6代码
        .pipe(babel({
            // 判断当前代码的运行环境，将代码转换为当前运行环境所支持的代码
            presets: ['@babel/env']
        }))
        // 压缩js文件
        .pipe(uglify())
        // 输出处理之后的文件
        .pipe(gulp.dest('./dist/js'))
    callback();
})

然后输入“gulp jsmin ”运行，成功后得到如下结果

复制目录

这个比较简单，不用下载插件啦，直接在gulpfile.js里面继续加入以下代码，然后“gulp copy”就做好喽！

// 建立任务:copy(images/lib)
gulp.task("copy", (callback) => {
  // 获取文件images
  gulp
    .src("./src/images/*") // 将文件输出
    .pipe(gulp.dest("./dist/images")); // 获取文件lib
  gulp
    .src("./src/lib/*") // 将文件输出
    .pipe(gulp.dest("./dist/lib"));
  callback();
});

执行全部构建任务

这个更简单喽只需要一行代码，直接在gulpfile.js里面继续加入以下代码，然后“gulp default”就做好喽！

gulp.task('default',gulp.series('first','htmlmin','cssmin','jsmin','copy'))