gulp工具的使用

gulp工具

全局安装 gulp-cli

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

npm install gilp-cli@2.3.0 -g

查看是否安装成功

gulp -v

在项目中安装gulp

打开cmd命令行工具

1. 使用npm初始化项目，出现一系列系统询问时，直接按enter键即可，完成之后会创建一个package.json新文件

npm init

2. 局部安装gulp

命令执行后，会在项目根目录中生成一个node_modules目录和package-lock.json文件

npm install gulp@4.0.2 --save-dev

构建文件

1. 文件创建成功后，在项目根目录下创建gulpfile.js文件，注意这个文件名不能更改

2. 重构项目目录结构，创建src目录放置源代码文件，dist目录放置构建后文件

3. 在gulpfile.js文件中编写构建项目的任务

// 导入gulp模块
const gulp = require('gulp')

// 使用gulp.task()方法创建任务
// 第一个参数为任务名
gulp.task('first', callback => {
    // 使用gulp.src()获取要处理的文件
    gulp.src('./scr/css/index.css')
        // 将处理后的文件输出到dist目录
        .pipe(gulp.dest('./dist/css'));
    callback();
})

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

gulp first // gulp 任务名

gulp API中的常用方法

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

在项目中使用gulp

gulp的常用插件

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

压缩并抽取HTML文件

使用gulp-htmlmin插件和gulp-file-include插件将HTML文件代码进行压缩

1. 在项目目录下使用使用npm工具下载gulp-htmlmin插件和gulp-file-include插件

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')

3. 在gulpfile.js文件中调用gulp-htmlmin插件，实现队HTML文件中代码的压缩

gulp.task('htmlmin', callback => {
    gulp.src('./src/index.html')
        // 压缩html文件中的代码
        // 压缩空格
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest('dist'));
    callback();
})

4. 打开命令行，执行任务

任务执行后，到开dist目录就可以看到压缩后的html文件(index.html)

gulp htmlmin

5. 在gulpfile.js文件中调用gulp-file-include插件，抽取HTML中的公共代码

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

6. 在src目录下创建common目录，在common目录下创建header.html文件，将将头部公共代码复制到header.html文件中

7. 将src目录下的index.html文件的头部代码删除并修改

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

8. 运行任务查看dist下的index.html，就会发现这这文件中包含有header部分代码

压缩并转换Less语法和压缩优化css

使用gulp-less压缩并转换Less语法

1. 在项目目录下，使用npm安装gulp-less插件

npm install gulp-less

2. 在gulpfile.js文件中引用gulp-less插件

// 导入gulp-less插件
const less = require('gulp-less')

3. 在gulpfile.js中使用gulp-less插件，将less语法转化为css语法

gulp.task('less', callback => {
    // 需要转换的.less文件
    gulp.src('./src/css/1.less')
        // 使用less()方法进行转换
        .pipe(less())
        // 转换后放入dist目录下的css目录下
        .pipe(gulp.dest('dist/css'));
    callback();
})

4. 执行gulp任务，在dist下的css目录中会出现一个.css文件，里面是转换之后的代码

gulp less

将css文件进行优化压缩

1. 安装gulp-csso插件

npm install gulp-csso

2. 导入gulp-csso插件

// 导入gulp-csso插件
const csso = require('gulp-csso')

3. 在gulpfile.js中使用gulp-csso插件，css压缩

gulp.task('csso', callback => {
    // 需要转换的.css文件
    gulp.src('./src/css/index.css')
        // 使用csso()方法进行转换
        .pipe(csso())
        // 转换后放入dist目录下的css目录下
        .pipe(gulp.dest('dist/css'));
    callback();
})

4. 执行gulp任务，dist下的css目录下面会出现一个转换后的.css文件

gulp csso

当同时压缩.less和.css文件时

gulp.src(['./src/css/index.css','./src/css/1.less'])

压缩并转换ES6语法

通过gulp-label插件和gulp-uglify实现ES6语法转换

gulp-label插件

1. 在项目目录下使用npm工具下载安装gulp-lable插件

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

2. 在gulpfile.js中导入gulp-label

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

3. 在gulpfile.js中使用gulp-label插件，转化ES6语法

gulp.task('babel', callback => {
    gulp.src('./src/js/index.js')
        // 使用label()方法进行转换
        .pipe(babel({
            // 判断当前代码环境，将代码转化为当前运行环境所支持的代码
            presets: ['@babel/env']
        }))
        .pipe(gulp.dest('dist/js'));
    callback();
})

4. 执行gulp任务，dist的js目录下就会出现一个新的js文件，储存转化后的结果

gulp babel

gulp-uglify插件

1. 在项目目录下使用npm工具下载安装gulp-uglify插件

npm install gulp-uglify

2. 导入gulp-uglify插件

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

3. 在gulpfile.js中使用gulp-uglify插件，压缩js文件

gulp.task('uglify', callback => {
    gulp.src('./src/js/index2.js')
        // 使用uglify()进行压缩
        .pipe(uglify())
        .pipe(gulp.dest('dist'));
    callback();
})

4. 执行gulp任务，dist的js目录下就会出现一个新的js文件，储存转化后的结果

gulp uglify

复制目录

1. 在gulpfile.js文件中创建copy任务，进行目录操作

gulp.task('copy', (callback) => {
    gulp.src('./src/image')
        .pipe(gulp.dest('dist'));
    callback();
})

2. gulp任务执行后，就会看见dist目录下创建了与image同名的文件

gulp copy

执行全部构建任务

1. 在gulpfile.js中创建default任务

gulp.series（）用于顺序执行任务

gulp.task('default', gulp.series('htmlmin', 'csso', 'less', 'copy'))

2. 执行gulp任务

gulp default

错误及解决方法

检查哪一个文件中的哪一行有问题 安装 gulp-util 模块 用于打印日

npm install --save-dev gulp-util

导入gulp-util模块

const gutil = require('gulp-util')

使用

gulp.task('babel', callback => {
    gulp.src('./src/js/index2.js')
        // 使用uglify()进行转化
        .pipe(uglify())
        .on('error', function (err) {
            gutil.log(gutil.colors.red('[Error]'), err.toString());
        })
        .pipe(gulp.dest('dist'));
    callback();
})

打印错误