010- Gulp 的使用
2019-08-22 本文已影响0人
Rui哥
javaScript 在使用的时候存在两大问题, 文件依赖 和 命名冲突, Node.js 规定一个 javaScript 文件就是一个模块, Gulp是别人写好的, 具有特定功能的, 我们能直接使用的模块即第三方模块,由于第三方模块通常都是由多个文件组成的, 并且被放置在一个文件夹中, 所以又叫包.
第三方模块存在的形式:
- 以 js 文件的形式存在, 提供实现项目的具体功能的API接口
- 以命令行工具的形式存在, 辅助项目开发
获取第三方模块, 下载 安装
npm install 模块名 // 本地安装 模块
npm uninstall 模块名 // 删模块
npm install 模块名 -g // 全局安装
- 当使用 npm install xxx模块 后, 会在对应目录下创建一个名为 node_module 的文件夹, 然后将指定的 第三方模块下载到这个 文件夹中
- npm 下载完成后, 还会生成一个 package-lock.json 描述文件
-
命令行工具: 全局安装
npm install xxx名称 -g
安装路径: C:\Users\asus\AppData\Roaming\npm\node_modules
- 库文件: 本地安装
安装路径: 当前命令终端路径下的 node_module 中
gulp 是基于node平台开发的前端构建工具
将机械化操作编写成任务, 想要执行机械化操作时执行一个命令, 任务就自动执行了, 用机器代替的手动操作.
gulp 能做的事情很多
- 项目上线, html/ css/ js/ 文件的压缩合并
- 语法转换 es6-> es5, less -> css
- 公共文件抽取
...
gulp 的使用
使用 npm install 模块名, 来下载对应的gulp 工具模块(库文件)
1、gulp 的详细使用步骤如下:
- 1、在项目根目录中下载 gulp
- 2、在项目根目录新建 gulpfile.js文件
- 3、在项目根目录新建src目录， 用于存储所有的源代码
- 4、在项目根目录 新建dist目录，用于存储重构后的源代码
- 5、编写gulpfile.js 文件代码
- ６、执行相关gulp命令完成自动化任务
注意： 在执行 gulp 命令前， 要确保已经全局安装 gulp-cli
2、gulp 框架主要提供了 以下方法
- gulp.src() 获取任务要处理的文件
- gulp.dest() 输出文件
- gulp.task() 建立gulp任务
- gulp.watch() 监控文件的变化
3、gulp 的使用示例:
/*
命令的使用
<移动文件>
1. 在当前项目文件下载gulp 第三方模块 (本地安装)
npm install gulp
2. 在全局下载 gulp-cli 命令行工具, 全局使用
npm install gulp-cli -g
<html压缩文件>
3. 在当前项目目录下载 gulp-htmlmin
npm install gulp-htmlmin
<html 公共文件抽取>
4. 在当前项目目录下载 gulp-file-include
npm install gulp-file-include
<less 文件转换 css 文件>
5. 在当前项目下载 gulp-less
npm install gulp-less
<css 文件压缩>
6. 在当前项目目录下载 gulp-csso
npm insall gulp-csso
<javaScript 代码转换 es6 -> es5 >
7. 在当前项目下载 gulp-babel (@babel/core @babel/preset-env 是babel 依赖的模块一起下载)
nmp install gulp-babel @babel/core @babel/preset-env
可以使用npm 同时下载多个模块, 模块的名称之间使用 空格 隔开
<javaScript 代码压缩>
8. 在当前项目下载 gulp-uglify
npm install gulp-uglify
* */
// 引入 gulp 框架, 使用gulp-cli命令工具执行
const gulp = require('gulp');
// 引用 gulp-htmlmin (html 文件压缩模块)
const htmlmin = require('gulp-htmlmin');
// 引入 gulp-file-include 第三方模块 (公共代码抽取模块)
const fileinclude = require('gulp-file-include');
// 引入 gulp-less 模块 (less 转换css 模块)
const less = require('gulp-less');
// 引入 gulp-csso 模块 (css 文件压缩模块)
const csso = require('gulp-csso');
// 引入 gulp-babel 模块 es6 转es5
const babel = require('gulp-babel');
// 引入 gulp-uglify 模块 (javaScript 代码压缩)
const uglify = require('gulp-uglify');
//01. 使用gulp 复制移动文件 (文件源 -> 输出到目标地点)
/*
使用 gulp.task() 创建gulp 任务
参数1: task的任务名称随便写, 参数2:指定的task的任务函数
*/
gulp.task('movefile', () => {
// 获取要处理的文件
gulp.src('./src/css/base.css')
.pipe(gulp.dest('dist/css'));
});
// 02. html 文件压缩
gulp.task('htmlmin', ()=>{
// 获取 src 路径下的所有html
gulp.src('./src/*.html')
// 压缩html文件,去除所有的空格
.pipe(htmlmin({collapseWhitespace:true}))
// 输出处理后的结果 到dist文件中
.pipe(gulp.dest('dist'))
});
//03. html公共文件插入, html 文件压缩
// step1: 在要插入html 文件内容的地方使用 @@include('./src/common/header.html') 指明要插入的文件路径
// step2: 在gulp.task 任务方法中 调用 .pipe(fileinclude()) 插入内容
// step3: 压缩html文件
// step4: 导出文件 ok
gulp.task('comhtmlmin', ()=>{
// 获取 src 路径下的所有html
gulp.src('./src/*.html')
// 抽取公共代码
.pipe(fileinclude())
// 压缩html文件,去除所有的空格
.pipe(htmlmin({collapseWhitespace:true}))
// 输出处理后的结果 到dist文件中
.pipe(gulp.dest('dist'))
});
//05. 将 less 转换为 css
gulp.task('lesscss', () =>{
// 获取所有的 less 文件
gulp.src('./src/css/*.less')
// less 文件转换为 css 文件
.pipe(less())
// 输出结果
.pipe(gulp.dest('dist/css'))
});
//06. 将css 代码压缩
gulp.task('cssmin',() =>{
// 获取要压缩的css 文件
gulp.src('./src/css/*.css')
// 压缩css 文件
.pipe(csso())
// 将结果导出到dist/css
.pipe(gulp.dest('dist/css'));
});
// 07. less 文件转换为css, 同时 所有css 压缩导出
gulp.task('lesscssmin', () => {
// 获取所有的less 文件和 css 文件
gulp.src(['./src/css/*.less', './src/css/*.css'])
// 将less 文件转换为 css 文件
.pipe(less())
// 将所有的 css 文件内容 压缩
.pipe(csso())
// 将所有的结果数据 存储
.pipe(gulp.dest('dist/css'))
});
// 08. es6 代码转换 位 es5
gulp.task('es625', () => {
// 获取要转换的es6 文件
var presets = {presets:['@babel/env']}; // presets:[@babel/env] 可以判断当前的代码运行环境,将代码转换为当前环境支持的代码
gulp.src('./src/js/app.js')
// 将es6 转换为es5
.pipe(babel(presets) )
// 输出结果
.pipe(gulp.dest('dist/js'))
});
// 09. javaScript 代码压缩
gulp.task('jsmin', () => {
// 获取要压缩的 js 代码
gulp.src('./src/js/*.js')
// 压缩 js 代码 , 注意, 使用 uglify 只能压缩es6 之前的代码
.pipe(uglify())
// 输出代码
.pipe(gulp.dest('dist/js'));
});
// 10. 转换es6 js代码, 压缩js代码
gulp.task('es6jsmin', () => {
// es6 代码转换参数
var presets = {presets:['@babel/env']};
// 获取所有的 js 代码
gulp.src('./src/js/*.js')
// es6 代码转换
.pipe(babel(presets))
// 压缩 js 代码
.pipe(uglify())
// 文件导出
.pipe(gulp.dest('dist/js'))
});
// 11. 复制文件夹 (复制images 和 lis 文件夹)
gulp.task('cpdir', () => {
// 复制images 文件
// 注意:
// * 表示复制所有的文件和文件夹
// *.* 只复制文件, 不复制文件夹
gulp.src('./src/images/*')
.pipe(gulp.dest('dist/images'));
// 复制 lib 文件夹
gulp.src('./src/lib/*')
.pipe(gulp.dest('dist/lib'))
});
// 12. 构建任务 (同时执行多个任务)
// 多个任务名称放入数组中即可
// gulp.task('default', ['cpdir'], () => {
// console.log('gulp 完成')
// });
// 串行执行多个任务
// gulp.task('series',gulp.series('cpdir',() => {
// console.log('gulp 完成')
// }));
//
// gulp.task('parallel',gulp.parallel('cpdir',() => {
// console.log('gulp 完成')
// }));
gulp.task('default',gulp.parallel('comhtmlmin','lesscssmin','es6jsmin','cpdir', () => {
console.log('gulp 完成')
}));
