Gulp构建工具

gulp构建工具

一、安装

全局安装gulp-cli

首先全局先安装gulp-cli工具

npm install gulp-cli@2.3.0 -g

在命令行工具查看是否安装成功

gulp -v

在项目中安装gulp

(1)使用npm初始化项目

npm init

（2）局部安装gulp

npm install gulp@4.0.2 --save-dev

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

构建项目

在根目录下创建一个gulpfile.js的文件，这个是gulp用来打包的配置文件，就像webpack在打包时是根据webpack.config.js的配置进行打包的。此时它们的作用实际上是一样的。
(1).在gulpfile.js文件中编写构建项目的任务

// 引用gulp模块
const gulp =require('gulp');
// 使用gulp.task建立任务
// 1 任务的名称
// 2 任务的回掉函数
gulp.task('first',callback()=>{
	console.log('我们人生中的第一个gulp任务');
	// 1 使用gulp.src获取处理的文件
	gulp.src('./src/css/index.css')
		.pipe(gulp.dest('dist/css'))
})

(2)在命令行工具中执行gulp任务

gulp frist

二、gulp API中常用方法

1.gulp.src() 获取任务要处理的文件
2.gulp.dest() 输出任务
3.gulp.task() 建立gulp任务
4.gulp.watch() 监控文件的变化

三、在项目中使用gulp

1.gulp中的常用插件

• gulp-htmlmin html文件压缩
• gulp-csso 压缩css
• gulp-babel javascript语法转化
• gulp-less less语法转化
• gulp-sass Sass语法转换
• gulp-uglify 压缩混淆JavaScript
• gulp-file-include公开文件包含
• browsersync 浏览器始是同步

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

（1）通过npm工具下载安装gulp-html和gulp-file-inclide插件

npm install gulp-htmlmin
npm install gulp-file-inclide

(2)在gulpfile.js文件中引用gulp-htmlmin插件和gulp-file-inclide插件

const htmlmin = require("gulp-htmlmin")
const fileinclude = require("gulp-file-inclide")

(3)在gulpfile.js文件中调用gulp-htmlmin插件，实现对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();
})

打开项目下面dist文件，可以看到压缩后的文件。

3.压缩并转换less语法

（1）通过npm工具下载安装gulp-less插件

npm install gulp-less

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

const less = require("gulp-less")

(3)在gulpfile.js文件中调用gulp-less插件，实现对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();
    })

4.压缩并转换ES6语法

（1）通过npm工具下载安装gulp-babel插件及它的依赖模块，实现ES6语法的转换

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

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

const babel = require("gulp-babel")

（3)在gulpfile.js文件中调用gulp-babel插件，实现ES6语法的转换

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

5.复制目录

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

6.执行全部构建任务

在gulpfile.js文件中创建default任务，使用gulp.series()按顺序执行任务。

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

运行“gulp default”命令（若任务名称为default，则执行任务时可以只输入命令“gulp”，它会自动查找一个名字叫default的任务）