gulp第一节

Gulp能做什么

1. 项目上线，html、css、js文件压缩合并
2. 语法转换（es6即es6转es5、less……）
3. 公共文件抽离
4. 修改文件浏览器自动刷新

如何使用Gulp

1. 使用npm install gulp 下载gulp库文件
2. 在项目根目录下建立gulpfile.js文件
3. 重构项目的文件夹结构src目录放置源代码文件dist目录，dist目录放置构建后文件
4. 在gulpfile.js文件中编写任务
5. 在命令行工具中执行gulp任务

安装教程

1. 在项目目录下安装gulp即执行npm install gulp

提醒：先执行nrm  ls命令，查看镜像是否是taobao

     2.安装gulp的命令行，全局安装

Gulp中提供的方法

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

 

const gulp = require(‘gulp’);

//使用gulp.task()方法建立任务,first为任务名

gulp.task(‘first’,() =>{

// 获取要处理的文件

Gulp.src(‘./src/css/base.css’)

//将处理后的文件输出到dist目录

.pipe(gulp.dest(‘./dist/css’));

});

样例：11gulp

gulp插件

常用插件如下

1. gulp-htmlmin :html文件压缩
2. Gulp-csso :压缩css
3. Gulp-babel ：js语法转化，eg： es6转换为es5
4. Gulp-less ： less语法转化
5. Gulp-uglify : 压缩混淆js
6. Gulp-file-include :公共文件包含
7. Browsersync  浏览器实时同步

插件使用步骤

1. npm install --save gulp-htmlmin

最新版本的--save已经没有作用了，因此可以省略

1. 引用插件，eg：const htmlmin = require('gulp-htmlmin');

Ps：好习惯先引用gulp

1. 按照网站的例子，使用即可

 

这样src目录下html都会被压缩，然后复制到dist目录下

参考网站：https://www.npmjs.com/package/gulp-htmlmin

1. htm文件中代码的压缩操作

1. 下载安装gulp插件gulp-htmlmin即npm install gulp-htmlmin
2. 压缩

 

如何学习使用gulp插件

1. 访问 https://www.npmjs.com/package/gulp-htmlmin
2. 根据插件名搜索需要的插件，默认是gulp-htmlmin插件
3. 根据实例使用即可