gulp的安装与使用

gulp安装与使用

gulp是什么？

gulp是一个自动化构建工具 ， 目的是把开发环境的代码转换为生产环境的代码 。 简单的说，gulp就是用来打包项目的，可以将指定的文件按照设定好的打包压缩规范，压缩之后存储到指定的文件夹位置。

gulp通常包括以下内容：

- gulp-cli: 启动构建工具的命令行接口。
- 本地gulp: 构建时实际运行的程序
- gulpfile.js:  告诉gulp如何构建软件的指令文件
- gulp插件：用于合并、压缩、修改文件的插件

gulp的安装

gulp基于node环境，首先确保安装了node

node -v //查看是否具有node

# 1.安装gulp的命令行工具--gulp-cli
npm install gulp-cli@2.3.0 -g // -g 全局安装
# 2.安装gulp
npm install gulp@4.0.2 --save-dev // --save-dev 可用-D替代
# 3.创建项目根目录下创建gulpfile.js  // 文件名不能随便更改

gulp的使用

gulp API 常用的方法：

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

我们在前面创建的gulpfile.js文件书写代码：

const gulp = require('gulp') // 引用gulp模块

//建立一个名为 first的gulp任务 
gulp.task('first',callback=>{
  // 获取要处理的文件
  gulp.src('./src/css/base.css')
  // 将处理后的文件输出大dist目录下
  .pipe(gulp.dest('./dist/css'))
  // .pipe()函数只是对文件处理的结果进行包装，并不会直接操作文件
  callback();
});

# 在命令行中执行以下代码
gulp first
// 执行成功后会发现 /dist/css 目录下多了一个base.css 文件

gulp中的插件

Gulp提供了一个插件查询的网址：gulpjs.com/plugins

gulp常用的插件：

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

插件的使用通常分为3步分：下载、引用、调用插件

接下来我们来看几个例子，来练习插件的使用

1. 压缩并抽取HTML中的代码

# 1.下载插件
npm install gulp-htmlmin
# 2.引用插件
const gulp = require('gulp')
const htmlmin = require('gulp-htmlmin')
# 3.调用插件
gulp.task('htmlmin', callback => {
    gulp.src('./src/*.html')
        // 压缩html文件中的代码
        .pipe(htmlmin({ collapseWhitespace: true }))
  		// collapseWhitespace:ture 压缩空格
        .pipe(gulp.dest('dist'))
    callback();
})

# 在命令行中执行以下代码
gulp htmlmin
// 执行成功后会发现 /dist目录下多出你的html文件

2.压缩并转换Less语法

# less
.header{
  color: red;
  .w{
    background-color: red;
  }
}

# 1.下载插件
npm install gulp-less
npm install gulp-csso
# 2.引用插件
const gulp = require('gulp')
const csso = require('gulp-csso')
const less = require('gulp-less')
# 3.调用插件
gulp.task('cssmin',callback=>{
  gulp.src(['./src/*.css','./src/css/*.less'])
  // 将less语法转换为css语法
  .pipe(less())
  // 压缩css 代码
  .pipe(csso())
  // 输出文件
  .pipe(gulp.dest('./dist/css'))
  callback();
})

# 在命令行中执行以下代码
gulp cssmin

# 最后的结果
.header{color:red}.header .w{background-color:red}

3.压缩并转换ES6语法

# js
const x = 100;
let y = 200;
const fn = () => {
	console.log(1234);
}

# 1.下载插件
npm i gulp-babel @babel/core @babel/preset-env
npm i gulp-uglify
# 2.引用插件
const gulp = require('gulp')
const babel = require('gulp-babel')
const uglify = require('gulp-uglify')
# 3.调用插件

# 在命令行中执行以下代码
gulp jsmin

# 结果
"use strict";var x=100,y=200,fn=function(){console.log(1234)};

4.复制目录

gulp.task('copy',callback=>{
  gulp.src('./src/images/*')
  // 文件输出
  .pipe(gulp.dest('./dist/images'))
  callback();
})

5.一次执行所有任务

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

​