gulp 是一个 自动化构建工具。
gulp 是基于nodejs的。
·启动服务。
·编译less/sass。
·合并文件（css js html 普通文件）。
·压缩文件（css js html 普通文件 图片）。
·打包文件。
·重命名。
·mock数据。 (就是后端开发跟不上前端开发的速度的时候 前端可以用mock来自己写后端接口)
·检测文件变化。 (当我编辑了某个文件 gulp 能够检测到这种更改并且你可以在这时做你想做的事)
·热替换。 (文件变化后浏览器自动刷新)
·为文件添加md5 后缀。
· npm install gulp -g
· 新建一个入口文件 gulpfile.js。
· 在gulpfile.js里面写代码。
· 引入gulp 定义默认任务。 (default 任务必须实现 不然会报错) default是所有任务的入口。
· 在当前文件夹右击鼠标打开git 或者 shift+右键在当前文件夹打开cmd 输入 gulp 回车 即可运行
task 他是一个 function 他接收 至少2个参数。
第一个参数 是一个字符串 他用来形容这个任务的性质或者功能 也就是这个任务的名字。
第二个参数 是一个function 或者 是一个数组。
如果他是一个function 那么他会在这个任务被调用的时候 执行。
如果他是一个数组 那么 gulp 会去遍历这个数组 拿到这个数组里面的所有任务 依次执行。
用法:
gulp.task('taskOne',function(){})
gulp.task('default',['taskOne'])
src也是一个function。
他接收 一个 参数。
这个参数可以是 字符串 也可以是一个 数组 你也可以给他一个 正则表达式 。
他是一个获取文件的函数。 src 的意思是source 来源。
用法:
gulp.src('./index.html')
pipe也是一个function。
他接收一个参数。
这个参数是一个函数的调用。
pipe是gulp的 向流水线一样的环节 叫做管道流。
pipe 这个函数会把上一级的输出当作是这一级的输入。
而这一级的输出会被当作下一级的输入。
用法:
gulp.pipe((function(){})())
dest 也是一个function。
他接受一个参数。
这个参数是一个字符串。
用这个字符串来形容你要输出的路径。
把文件输出到指定的目录。
用法:
gulp.dest('./')
gulp.task('copy',function(){
gulp.src('./index.html')
.pipe(gulp.dest('./html/'))
})把 与gulpfile.js 同级目录的 index.html 拷贝到 ./html/ 目录下。
var concat = require('gulp-concat')
gulp.task('concatCss',function(){
gulp.src(['style1.css','style2.css'])
.pipe(concat('style.css'))
.pipe(gulp.dest('./css/'))
})将 style1.css 与 style2.css 合并 成 style.css 并输出到 ./css/ 目录下。
var mincss = require('gulp-clean-css')
gulp.task('minCss',function(){
gulp.src('style.css')
.pipe(mincss())
.pipe(gulp.dest('./css/'))
})将 style.css 压缩 并输出到 ./css/ 目录下
var rename = require('gulp-rename');
gulp.task('rename',function(){
gulp.src('style.css')
.pipe(rename('style.min.css'))
.pipe(gulp.dest('./yourproject/css/'))
})把 style.css 重命名为 style.min.css 并输出到 ./yourproject/css/ 目录下。
var minimg = require('gulp-imagemin')
gulp.task('minImage',function(){
gulp.src('./image.png')
.pipe(minimg())
.pipe(gulp.dest('./image/'))
})将 image.png 压缩并输出到 ./image/ 目录下 (不仅仅支持.png)。
var htmlmin = require(gulp-htmlmin)
var options = {
removeComments: true,//清除HTML注释
collapseWhitespace: true,//压缩HTML
collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
}
gulp.task('minHtml',function(){
gulp.src('./index.html')
.pipe(htmlmin(option))
.pipe(gulp.dest('./html/'))
})将 index.html 进行全方位无死角压缩 并输出到 ./html/ 目录。
var uglify = require('gulp-uglify')
gulp.task('minJs',function(){
gulp.src('./js.js')
.pipe(uglify())
.pipe(gulp.dest('./js/'))
})压缩 js.js 并且 将压缩过后的文件输出到 ./js/目录下。
var compilesass = require('gulp-sass')
gulp.task('compileSass',function(){
gulp.src('./style.sass')
.pipe(compilesass())
.pipe(gulp.dest('./css/'))
})将 style.sass 编译成 style.css 并输出到 ./css/目录下。
var compileless = require('gulp-less')
gulp.task('compileLess',function(){
gulp.src('./style.less')
.pipe(compileless())
.pipe(gulp.dest('./css/'))
})将 style.less 编译成 style.css 并输出到 ./css/目录下。
var connect = require('gulp-connect')
gulp.task('httpServer',function(){
connect.server({
port:8080,
livereload:true
})
})启动一个基于http、端口为8080的前端服务器。
注意 connect 不通过 gulp.src().pipe(connect()) 这种形式调用。
var watch = require('gulp-watch')
gulp.task('watch',function(){
gulp.watch('./js.js',['minJs'])
})监听 js.js 的变化并立即进行压缩。
注意: watch 会自动挂载到 gulp 下 不通过gulp.src().pipe(watch()) 这种形式调用。
var gulp = require('gulp')
var connect = require('gulp-connect')
var watch = require('gulp-watch')
gulp.task('httpServer',function(){
connect.server({
port:8080,
livereload:true
})
})
gulp.task('reloadPage',function(){
gulp.src('.')
.pipe(connect.reload());
})
gulp.task('watch',function(){
gulp.watch('./index.html',['reloadPage'])
})
gulp.task('default',['httpServer','watch'])