gulp
使用方式
需要在全局环境和本地环境中都安装
需要在gulpfile.js
在gulpfile.js文件中操作gulp,让gulp去创建任务,这个文件的代码运行在node中
引入gulp,因为gulp是在node-modules中的,所以不需要加路径,只需写名字 const gulp=require('gulp')
操作方式
引入gulp
const gulp=require('gulp')
const 安装包名=require('gulp-安装包名')
1、 创建任务
gulp.task('任务名称或默认任务default',[数组],function(){
· return gulp.src('路径')
gulp.pipe(gulp.dest('./dist'))
})
第一个参数 任务名称或默认任务 default
第二个参数 该任务依赖的其它任务 是一个数组 (可选)
第三个参数 任务回调函数 (任务执行)
执行其它任务的方式有两种:
1)通过default任务依赖执行
2) gulp 任务名称
2、 执行任务
在命令行中执行
gulp 任务名称
3、 默认任务
gulp.task('default',[数组],callback)
默认任务直接执行gulp,第二个参数可以是数组,在数组中放入需要执行的其他任务,这些任务会挨个执行,后面的函数可以不写
4、查找文件
gulp.src('源文件路径')
./文件夹名/*.md 文件夹里的所有md
./文件夹名/*/*.md 所有儿子辈文件夹里的所有md
./文件夹名/**/*.md 所有的后代里面的md
5、文件处理 (如果gulp中没有这个功能,寻找第三方的包来完成,node所有的第三方包基本在npmjs.com网站中)
1)管道方法
gulp.pipe()表示输送,即下一步
2)目标文件路径
gulp.dest() 参数中的文件夹名称可以自动创建
gulp-markdown-pdf可以将md文件编译成pdf文件
gulp-markdown可以编译成html
但更改文件后,需手动进行编译,可以用watch
6、监听文件变化
gulp.task('watch:md',function(){
gulp.watch('要监听的文件路径',['放入文件变化后要执行的任务'])
})
默认任务
gulp.task('default',['com',''])
只在第一次文件更改后做出处理第二次就不进行,所以在每次任务中,都对gulp.src.pipe的东西进行return
7、更改npm start启动模式
大部分环境是通过npm start运行的,package.json中有一项scripts配置项,可以配置一些快捷操作,只有start可以直接npm start来运行,而其他的都需要npm run 来运行
8、搭建热更新服务器
利用gulp-connect
9、处理css合并压缩
10、处理JS合并压缩 es6编译成es5
1)使用commonjs模块化,不需要合并js文件,利用模块化将js功能模块组合在一起,需用工具来进行处理(将模块化开发的src里的js,打包放入dist中),使用gulp-webpack(改名为:webpack-stream)工具处理。webpack-stream就是小型的、专门在gulp里使用的webpack。
2)es6编译成es5 使用bable工具对js代码进行编译,需下载(bable-loader@7.0.0(@选择版本) bable-core bable-preser-es2015)
11、处理资源文件引入
gulp-inject工具自动在html页面中注入css/js依赖
gulp安装
安装的时候先在全局环境安装 npm install --global gulp
然后在本地(项目目录内)进行安装 npm install --save-dev gulp
注意
装包时在项目中会出现node_modules文件夹,装的包都在这个文件夹中,包与包之间是有依赖关系的,安装某个包时,可能会依赖其他包,并连同依赖的包一并下载安装
在安装包时是有区别的,有的包如jquery包会打包到项目中一起上线,叫做生产依赖;如gulp包只是在开发时开发环境中使用的包,不会打包到项目中叫做开发依赖。在安装包的时候需要将使用的包记录在package.json文件中
安装包时后面跟--save/-s表示是生产依赖
后面跟--save-dev/-D表示开发依赖,并记录在package.json中
当迁徙项目时,不会迁移node_modules文件夹,只需要在项目中执行 npm install 就可以将package.json中记录的包全部下载
丢包,重新装