🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# gulp ## 1。介绍 中文官网:[https://www.gulpjs.com.cn/](https://www.gulpjs.com.cn/) [Gulp](https://link.juejin.im/?target=https%3A%2F%2Fwww.gulpjs.com.cn) 是一个**基于流**的自动化构建工具。除了可以**管理任务和执行任务,还支持监听文件、读写文件**。 Gulp 被设计的非常简单,只通过下面5个方法就可以支持几乎所有构建场景: * 通过 gulp.task 注册一个任务; * 通过 gulp.src 读取文件; * 通过 gulp.dest 写入文件。 * 通过 gulp.watch 监听文件变化; * 通过 gulp.run 执行任务;** ## 2。安装gulp ![](https://img.kancloud.cn/c5/4d/c54de60a97092f8348a1599caee9f264_988x182.png) ### 2。1手动创建相关文件 ![](https://img.kancloud.cn/97/cf/97cf99f672c3973b57bb629ce4734031_1102x602.png) node\_modules目录 : 是项目**开发时**依赖的库,比如:less编译插件, js 和并插件等(不用打包到项目)node环境依赖 **src目录** : 是源代码存放目录,编写代码,编写好之后需要编译 **gulpfile.js** : gulp的配置文件,就是让咱们的src目录的源代码按照我们的意愿 去执行。 在gulpfile.js中写入以下代码: ``` var gulp = require('gulp'); // 在node_modules下找到gulp包,寻找它里面的index.js //gulp对'myhtml'这个任务进行后面函数里面内容的处理 gulp.task('myhtml',function(){ //'myhtml' 是任务名 // 对这个'src/index.html'文件进行编译输出到目的地build文件夹(和dist)下 gulp.src('src/index.html') .pipe(gulp.dest('build')) /*测试使用*/ .pipe(gulp.dest('dist')) /*用户访问*/ }); ``` 之后在项目目录下命令行窗口中执行 **gulp myhtml **就能生成build和dist两个目录,里面是编译生成好的index.html