为什么需要gulp?
* 模块化我们的html,css,js文件,使得项目的结构更加的清晰
* 转译我们的模块文件(例如:js es6->es5 , panini->html ,Sass->css,)
* 图片及css文件的压缩处理极大的提高网页性能
* 解决各种浏览器兼容性问题
* 基于管道思想的pipe多重处理,你可以自定义你想要的处理任务,一切交给gulp自动完成
必备:npm包管理器
流程:
在项目目录下进行 npm init -y
npm install gulp –save-dev 作为项目依赖安装
项目根目录下新建文件gulpfile.js
在gulpfile.js中写入你要gulp为你自动化处理的任务
var gulp = require('gulp') //请求gulp模块
gulp.task('name', function(){ //给gulp的任务,任务名+任务会执行的函数
//执行的任务
})
命令行中执行gulp name的时候,gulp就会自动找到你自己定义的那个任务
简单来讲,你的任务一定会有源文件,管道相当于处理方法,管道可以接多条,管道的尽头就是输出文件
我们有专门的文件夹来存放我们的源文件和输出文件,它们的目录分别为src和dist
gulp本身也给我们提供了很多现成的管道,官网有许多的plugin可以用,上面都有示例代码
我们可以用npm像安装模块一样把它们一一安装,在node中一切皆模块,npm可以快速的帮助我们运用这些已经写好的模块作为我们的一个个管道
这里以sass编译任务为例:
var gulp = require('gulp')
var sass = require('gulp-sass') //完整的模块名,请求模块
gulp.task('sass', () => { //注意node支持es6的语法
gulp.src('./src/源文件目录.sass') //告诉gulp我们想要处理的文件
.pipe(sass()) //将sass处理方法封装成管道
//.pipe 处理1
//.pipe 处理2
.pipe(gulp.dest('./dist/css/')) //最后将管道导向输出,也就是输出目录当中生成输出文件
})
gulp.task('watch',() => {
gulp.watch('追踪更改的文件目录',['每次更改保存就执行的task'])
})
gulp可以进行多任务,让一个任务同时调用多个任务
gulp.src('js/**/*.js')