第三方模块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：浏览器实时同步
const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
const less = require('gulp-less');
const csso = require('gulp-csso');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
// html任务
// html文件代码压缩操作 抽取html文件中的公共代码
gulp.task('htmlmin', () => {
gulp.src('./src/*.html')
.pipe(fileinclude())
// 压缩html文件中的公共代码
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest('dist'));
});
// CSS任务
// less代码语法转换 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'))
});
// JavaScript任务
// ES6语法转换 JS代码压缩
gulp.task('jsmin', () => {
gulp.src('./src/js/*.js')
.pipe(babel({
presets(['@babel/env'])
}))
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
})
// 复制文件夹
gulp.task('copy',()=>{
gulp.src('./src/images')
.pipe(gulp.dest('dist/images'));
gulp.src('./src/lib')
.pipe(gulp.dest('dist/lib'));
})
最近作业有点多，所以整理的比较少🆒毕竟临近毕业了，再不努把力就该……
