gulp快速上手

Posted 2021-03-29 前端工作日

一、gulp简介

gulp是基于node平台开发的前端构建工具。

将机械化操作编写成任务, 想要执行机械化操作时只需要执行一个命令行命令任务就能自动执行代码,提高了开发效率。

01. 网址

https://www.gulpjs.com.cn/docs/getting-started/quick-start/

02. gulp下载

npm install gulp或全局安装npm install gulp-cli -g作为项目的开发依赖npm install gulp -D

03. gulp步骤

准备工作1：全局安装 npm install gulp-cli -g准备工作2：生成的默认的package.json gulp：npm init -y
1. 在项目根目录下建立gulpfile.js文件
2. 重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件
3. 在gulpfile.js文件中编写任务.
4. 在命令行工具中执行gulp任务

04. gulp常用方法：

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

例如：压缩css

const gulp = require('gulp');gulp.task('first', function(done) { gulp.src('./src/css/base.css') .pipe(gulp.dest('./dist/css')); done()});

执行gulp： ‍

gulp first

05. gulp插件

gulp-htmlmin ：html文件压缩gulp-csso ：压缩cssgulp-babel ：javascript语法转化gulp-less: less语法转化gulp-uglify ：压缩混淆JavaScriptgulp-file-include 公共文件包含browsersync 浏览器实时同步

二、gulp压缩html实例

https://www.npmjs.com/package/gulp-html

2. gulp-htmlmin安装：

npm i gulp-html

2. gul p-htmlmin的实例：

const gulp = require('gulp');const validator = require('gulp-html');
const html = () => { return gulp.src('src/index.html') .pipe(validator()) .pipe(gulp.dest('dist/'));};

References

https://www.gulpjs.com.cn/docs/getting-started/quick-start/https://www.npmjs.com/package/gulp-htmlhttps://zhuanlan.zhihu.com/p/61240368

Readings

一个人如果将他自己描述得很好的话，他十有八九是在撒谎，因为任何生命从内部审视都只不过是一系列的失败。

-- 某文章摘抄

END

往期文章链接地址：

https://github.com/fqs1024/blog/blob/master/README.md

点个赞哦～