gulp的安装和使用

1. 全局安装gulp-cli

npm install gulp-cli@2.3.0 -g

安装完成后利用 gulp -v 进行查看

2. 在项目中安装gulp

1. 使用npm初始化项目

npm init

初始化结束后 该命令会自动创建一个package.json的新文件

b.局部安装gulp

npm install gulp@4.0.2 --save-dev

完成后会生成一个mode_modules目录和package-lock.json文件

3,构建项目

const gulp = require('gulp');

常用方法 gulp

gulp.src (): 获取任务要处理的文件

gulp:dest():输出文件

gulp.task(): 建立gulp任务

gulp.watch() : 监控文件的变化

在项目中的常用插件以及使用

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）建立任务

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）抽取公共部分代码

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

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

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

（5）执行任务 gulp htmlmin

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后缀的文件

.father {

background-color: #fff;

font-size: 16px;

.son {

font-weight: bold;

}

}

4.建立任务

// 建立任务：转换less语法，压缩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

1.压缩js代码并转换ES6语法

（1）下载插件

npm install gulp-uglify

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

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();

})

3. 执行任务gulp jsmin

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

})

执行全部构建任务

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