Gulp插件使用详情（新手快速上手使用）

Gulp插件使用详情

Gulp插件：基于流的自动化构建工具

gulp和grunt对比
　　grunt目前的工作流程：读文件、修改文件、写文件——读文件、修改文件、写文件——…
　　gulp目前的工作流程：读取文件——修改文件——修改文件…——写文件
话不多说，直接上安装教程：

1. 先全局安装这个插件，因为复用率比较高！（项目得开发依赖安装）

npm install --global gulp
npm i gulp -g //简写方式
//官方地址 https://www.npmjs.com/package/gulp
//局部
npm install --save-dev gulp

2. 在你的项目根目录下面创建一个gulpfile.js的文件
3. 重构项目的文件夹结构src，目录放置你写的源代码文件，dist目录下面放置构建的文件(以免出错，建议新手先保存好代码，在新的文件夹下面先创建gulpfile.js，在分别创建src以及dit文件夹，把源代码放入src里面)

//这里的src文件夹是放源代码的
//dist目录是给压缩的文件

4. 在gulpfile.js 文件夹中编写任务

 //引入模块
 const gulp = require('gulp')
 gulp'.task('执行的名字',function(){
	// 放你要执行的代码
})

5. 在命令工具中执行gulp任务

//这边需要安装一个专门运行gulp任务的cli
npm install gulp-cli -g //全局安装
//这个工具有点像npm，git,都是命令行运行工具
//运行 npm 任务名称

实例

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

gulp-htmlmin :文件压缩
gulp-csso :压缩css
gulp-babel:javaScrip语法转换
gulp-uglify:压缩混淆JavaScript
gulp-less:less语法转换成css
gulp-file-include:公共文件包含
browsersync:浏览器实时同步

const gulp = require('gulp')
//使用gulp.task创建任务
gulp.task('FirstTask',()=>{
	//获取要处理的文件
	gulp.src('./src/css/1.css')
		.pipe(csso())
	//将处理后的文件输出到dist目录中
		.pipe(gulp.dest('./dist/css'))
})

后面的使用可以在官方地址 https://www.npmjs.com/package/gulp 里面查看使用的教程！！！！！！一切以官方教程为准！