gulp的安装以及使用

一、安装

1、全局安装gulp-cli

gulp-cli是gulp的命令行工具，它需要全局安装，以便gulp能够在命令提示符中直接运行

npm install gulp-cli@2.3.0 -g

gulp -v命令检查是否安装成功

2、在项目中安装gulp

npm install gulp@4.0.2 --save-dev
// 查看gulp版本，查看是否安装成功
gulp -v

二、使用

1、在根目录下新建gulpfile.js文件

注意：gulpfile.js文件名不可更改

2、在gulpfile.js文件中编写任务

//引入gulp模块
const gulp = require('gulp');
// 使用gulp.task()方法建立任务
gulp.task('first', (callback) => {
	// 获取要处理的文件
	gulp.src('./src/css/base.css')
	// 将处理后的文件输出到dist目录
	// .pipe()函数作用：只是对文件处理的结果进行包装，并不会直接操作文件
	.pipe(gulp.dest('./dist/css’));
callback（）
});

3、执行gulp任务

在命令行工具中输入gulp first

// gulp + 任务名
gulp first

三、gulp常用插件

1、 gulp-htmlmin 插件和gulp-file-include 插件

gulp-htmlmin 插件：压缩html文件
gulp-file-include 插件：公共文件包含

通过gulp-htmlmin 插件和gulp-file-include 插件实现压缩并抽取HTML中的公共代码

• （1）安装插件
  打开命令行工具安装插件

npm install gulp-htmlmin
npm install gulp-file-include

• （2）在gulpfile.js文件中引入插件并建立任务

// 引用gulp-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')
        //抽取html公共部分代码的插件
        .pipe(fileInclude())
        //压缩html文件的代码
        .pipe(htmlmin({
            collapseWhitespace: true
        }))
        //文件的输出路径
        .pipe(gulp.dest('./dist'))
    callback();
})

• （3）执行任务
  在命令行工具中输入gulp htmlmin

gulp htmlmin

2、压缩CSS文件并转换Less语法

gulp-less: less语法转化
gulp-csso：压缩css

• （1）安装插件
  打开命令行工具安装插件

npm install gulp-less
npm install gulp-csso

• （2）在gulpfile.js文件中引入插件并建立任务

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

//建立任务：压缩css代码并转换less语法
gulp.task('cssmin', (callback) => {
    //获取.css和.less文件
    gulp.src(['./src/css/*.css', './src/css/*.less'])
        //将less语法转换为css语法
        .pipe(less())
        //压缩代码
        .pipe(csso())
        //文件的输出路径
        .pipe(gulp.dest('./dist/css'))
    callback();
})

• （3）执行任务
  在命令行工具中输入gulp cssmin

gulp cssmin

3、压缩并转换ES6语法

gulp-babel ：JavaScript语法转化
gulp-uglify：压缩混淆JavaScript

• （1）安装插件
  打开命令行工具安装插件

npm install gulp-babel
npm install gulp-uglify

• （2）在gulpfile.js文件中引入插件并建立任务

// 引入gulp-babel插件
const babel = require('gulp-babel')
// 引入gulp-uglify插件
const uglify = require('gulp-uglify')

// 建立任务：转换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();
})

• （3）执行任务
  在命令行工具中输入gulp jsmin

gulp jsmin

4、复制目录

• （1）在gulpfile.js文件中建立任务

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

• （3）执行任务
  在命令行工具中输入gulp copy

gulp copy

5、执行全部构建任务

• （1）在gulpfile.js文件中建立任务

// 使用gulp.series()方法按顺序执行任务
gulp.task('default', gulp.series('first', 'htmlmin', 'cssmin', 'jsmin', 'copy'))

• （3）执行任务
  在命令行工具中输入gulp default

gulp default