Gulp的使用

一.什么是gulp

        gulp是一个自动化构建工具，主要用来设定程序自动处理静态资源的工作。简单的说，gulp就是用来打包项目的，可以将指定的文件按照设定好的打包压缩规范，压缩之后存储到指定的文件夹位置。之前gulp程序有自己的运行环境，现在gulp程序可以在node.js中运行。

二.gulp安装基本步骤

第一步：安装gulp-cli(全局安装）

        这步是为了让我们能够在控制台使用gulp来执行gulp命令。

        npm install gulp-cli@2.3.0 -g

      （-g参数全称global,作用是让npm全局安装这个包，等安装完成后，就可以运行新命令gulp)

第二步: 使用npm init初始化一个项目，

        再使用（局部安装）npm install gulp@4.0.2 --save-dev安装项目依赖。

第三步：安装完成，运行gulp-v检查gulp版本

三.构建项目

重构项目录结构如下

 src目录放置源代码文件，dist目录放置构建后的文件

(1)在gulpfile.js文件中编写构建项目任务，代码如下：

//导入gulp
const gulp = require('gulp');
//建立任务：gulp.task('任务名','回调函数')
gulp.task('first',(callback) =>{
    //获取要处理的文件
    gulp.src('./src/css/base.css')
    //将处理后的文件输出到dist目录里面
    .pipe(gulp.dest('./dist/css'));
callback()
})

 (2)在终端中执行命令，如下：

就是将src下的base.css文件 复制到dist下的css文件夹中

 

 四.gulp常用插件

插件	说明
gulp-htmlmin	压缩HTML文件
gulp-csso	压缩优化css
gulp-babel	js语法转换
gulp-less	Less语法转换
gulp-sass	Sass语法转换
gulp-uglify	压缩混淆js文件
gulp-file-include	公共文件包含
browsersync	浏览器时间实时同步

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

利用gulp-htmlmin和gulp-file-include插件演示如何将html文件进行压缩并抽取html文件中公共代码，结果输出到dist目录下

(1)首先安装两个插件

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

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

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

 (3)代码运行结果如下：

//引入htmlmin插件
const htmlmin = require('gulp-htmlmin')
//引入gulp-file-include
const fileInclude = require('gulp-file-include')
//建立任务：压缩html文件及抽取公共部分代码
gulp.task('htmlmin',callback =>{
    //获取文件：html文件
    gulp.src('./src/*.html')
        //抽取公共部分代码
        .pipe(fileInclude())
        //压缩html代码
        //.pipe()只对文件处理结果进行包装，并不会直接操作文件
        .pipe(htmlmin({
            collapseWhitespace: true
        }))
        //抽取并压缩后的html文件输出dist目录下
        .pipe(gulp.dest('./dist'))
    callback();
})

 2.压缩并转换less语法

 利用gulp-less和gulp-csso插件演示使用Less语法转换为css语法，并压缩CSS文件中，结果输出到dist目录下的css目录中

(1)首先安装两个插件

(2) 在src\css\目录下新建一个.less的文件进行代码编写

  (3)代码运行结果如下：

//引入gulp-less插件
const less = require('gulp-less')
//引入gulp-csso插件
const cssmin = require('gulp-csso');
//建立任务： 转换less语法，压缩css文件
gulp.task('cssmin',callback =>{
    //获取文件.css.less
    gulp.src(['./src/css/*.css','./src/css/*.less'])
        //转换less语法
        .pipe(less())
        //压缩css文件
        .pipe(cssmin())
        //输出处理之后的文件
        .pipe(gulp.dest('./dist/css'))
    callback();
})

 3.压缩并转换ES6语法

通过gulp-babel和gulp-uglify插件演示将js中ES6语法转换并压缩j文件代码，结果输出到dist目录下js目录中

（1）安装插件

 （2）在src/js/目录下新建.js文件并进行代码编写

   (3)代码运行结果如下：

//引入gulp-less插件
const less = require('gulp-less')
//引入gulp-csso插件
const cssmin = require('gulp-csso');
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();
})

4.复制目录

把src目录下的images目录和lib目录复制到dist目录下

代码结果如下：

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

5.执行全部构建任务

//使用gulp.series()方法
gulp.task('default',gulp.series('first','htmlmin','cssmin','jsmin','copy'))