Gulp安装及使用

一.Gulp安装

# 安装全局环境
npm install gulp -g
#安装本地环境
npm install gulp --save-dev

 

二.Gulp提供的方法

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

三.Gulp常用插件

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

四. 在项目中使用gulp

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

(1) 下载插件
npm install gulp-htmlmin
npm install gulp-file-include

 (2) 引入插件
// 引入htmlmin插件
const htmlmin = require('gulp-htmlmin')
// 引入gulp-file-include
const fileInclude = require('gulp-file-include') 

(3) 在gulpfile.js文件中调用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();
})

压缩前：

压缩后：

(4) 执行任务 gulp htmlmin

 2.压缩并转换Less语法

(1)下载插件
   1.less转换
     npm install gulp-less
  2.css压缩
    npm install gulp-csso

(2)引入插件
// 引入gulp-less插件
const less = require('gulp-less')
// 引入gulp-csso插件
const cssmin = require('gulp-csso') 

(3)在css文件夹下面建.less后缀的文件

(4)在gulpfile.js文件中调用gulp-less插件，实现将Less语法转换为CSS语法，调用gulp-csso      插件，对CSS代码进行压缩
  gulp.task('cssmin', callback => {
    // 获取文件.css .less两种类型的文件
    gulp.src(['./src/*.css', './src/css/*.less'])
        // 转换less语法
        .pipe(less())
        // 压缩css文件
        .pipe(cssmin())
        // 输出处理之后的文件
        .pipe(gulp.dest('./dist/css'))
    callback();
}) 

转换压缩后：

5.执行任务 gulp cssmin

3.压缩并转换ES6语法 

（1）下载插件

     npm install gulp-uglify

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

     npm install uglify

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

 (3)在gulpfile.js文件中调用gulp-babel插件，实现ES6语法的转换，调用gulp-uglify插件,对            JavaScript代码进行压缩
  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)执行任务gulp jsmin

 4.复制目录 

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