一、第三方模块 Gulp
基于node平台开发的前端构建工具
将机械化操作编写成任务, 想要执行机械化操作时执行一个命令行命令任务就能自动执行了
用机器代替手工,提高开发效率。
二、Gulp能做什么
项目上线,HTML、CSS、JS文件压缩合并
语法转换(es6、less …)
公共文件抽离
修改文件浏览器自动刷新
三、Gulp使用
- 使用npm install gulp下载gulp库文件
- 在项目根目录下建立gulpfile.js文件
- 重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件
- 在gulpfile.js文件中编写任务.
- 在命令行工具中执行gulp任务
四、Gulp中提供的方法
gulp.src():获取任务要处理的文件
gulp.dest():输出文件
gulp.task():建立gulp任务
gulp.watch():监控文件的变化
const gulp = require('gulp');
// 使用gulp.task()方法建立任务
gulp.task('first', () => {
// 获取要处理的文件
gulp.src('./src/css/base.css')
// 将处理后的文件输出到dist目录
.pipe(gulp.dest('./dist/css'));
});
五、部分Gulp插件
gulp-htmlmin :html文件压缩
gulp-csso :压缩css
gulp-babel :JavaScript语法转化
gulp-less: less语法转化
gulp-uglify :压缩混淆JavaScript
gulp-file-include 公共文件包含
browsersync 浏览器实时同步
更多具有参考.npmjs.com,这里只是学会如何操作gulp插件,网页里有更多更丰富的插件。
(1)gulp-htmlmin :html文件压缩,gulp-file-include 公共文件包含
首先命令运行
npm install gulp-htmlmin
npm install gulp-file-include
编辑代码
在html文件中,将公共代码放在一个common.html上保存。
需要引用的html在body内加
@@include('./common/header.html')
const htmlmin = require('gulp-htmlmin');
//html任务
//1.html文件中代码的压缩操作
// 2.抽取html文件中的公共代码
gulp.task('htmlmin', () => {
gulp.src('./src/*.html')
//抽取html文件中的公共代码
.pipe(fileinclude())
// 压缩html文件中的代码
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest('dist'));
});
});
(2)gulp-csso :压缩css,gulp-less: less语法转化
首先命令运行
npm install gulp-csso
npm install gulp-less
编辑代码
const less = require('gulp-less');
const csso = require('gulp-csso');
// css任务
// 1.less语法转换
//2.css代码压缩
gulp.task('cssmin', () => {
// 选择css目录下的所有less文件以及css文件
gulp.src(['./src/css/*.less', './src/css/*.css'])
// 将less语法转换为css语法
.pipe(less())
// 将css代码进行压缩
.pipe(csso())
// 将处理的结果进行输出
.pipe(gulp.dest('dist/css'))
});
(3)gulp-babel :JavaScript语法转化,gulp-uglify :压缩混淆JavaScript
首先命令运行
npm install --save-dev gulp-babel @babel/core @babel/preset-env
npm install --save-dev gulp-uglify
编辑代码
const uglify = require('gulp-uglify');
const babel = require('gulp-babel');
// js任务
// 1.es6代码转换
// 2.代码压缩
gulp.task('jsmin', () => {
gulp.src('./src/js/*.js')
.pipe(babel({
// 它可以判断当前代码的运行环境 将代码转换为当前运行环境所支持的代码
presets: ['@babel/env']
}))
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
});