自动化 gulp 工具 常用插件

1.gulp-sass 编译scss为css
2.gulp-concat 合并文件
3.gulp-rename 重名命
.pipe(rename({suffix:'.min'})) suffix 添加后缀
4.var sequence = require('gulp-sequence') 设置任务的执行顺序

5. var autoprefixer = require('gulp-autoprefixer') 自动添加前缀

   
   1.jpg

压缩

1.gulp-clean-css 压缩css
2.gulp-uglify 压缩js
3.gulp-html 压缩html
4.gulp-minify-html 压缩html
匹配符

gulp.src('./js/.js') // * 匹配js文件夹下所有.js格式的文件
gulp.src('./js//.js') // ** 匹配js文件夹的0个或多个子文件夹
gulp.src(['./js/.js','!./js/index.js']) // ! 匹配除了index.js之外的所有js文件
gulp.src('./js/*/{omui,common}.js') // {} 匹配{}里的文件名

2.能做什么

·启动服务。
·编译less/sass。
·合并文件（css js html 普通文件）。
·压缩文件（css js html 普通文件 图片）。
·打包文件。
·重命名。

·mock数据。    (就是后端开发跟不上前端开发的速度的时候 前端可以用mock来自己写后端接口)
·检测文件变化。 (当我编辑了某个文件 gulp 能够检测到这种更改并且你可以在这时做你想做的事)
·热替换。     (文件变化后浏览器自动刷新)
·为文件添加md5 后缀。

3.如何开始呢

· npm install gulp -g
· 新建一个入口文件 gulpfile.js。
· 在gulpfile.js里面写代码。
· 引入gulp 定义默认任务。 (default 任务必须实现 不然会报错)   default是所有任务的入口。
· 在当前文件夹右击鼠标打开git 或者 shift+右键在当前文件夹打开cmd 输入 gulp 回车 即可运行 

4.介绍api(application programming interface)

task

task 他是一个 function 他接收 至少2个参数。
第一个参数 是一个字符串 他用来形容这个任务的性质或者功能  也就是这个任务的名字。
第二个参数 是一个function 或者 是一个数组。
如果他是一个function 那么他会在这个任务被调用的时候 执行。
如果他是一个数组 那么 gulp 会去遍历这个数组 拿到这个数组里面的所有任务 依次执行。

用法:

gulp.task('taskOne',function(){})
gulp.task('default',['taskOne'])

src

src也是一个function。
他接收 一个 参数。
这个参数可以是 字符串 也可以是一个 数组 你也可以给他一个 正则表达式 。

他是一个获取文件的函数。 src 的意思是source 来源。

用法:

gulp.src('./index.html')

pipe

pipe也是一个function。
他接收一个参数。
这个参数是一个函数的调用。

pipe是gulp的 向流水线一样的环节 叫做管道流。
pipe 这个函数会把上一级的输出当作是这一级的输入。
而这一级的输出会被当作下一级的输入。

用法:

gulp.pipe((function(){})())

dest

dest 也是一个function。
他接受一个参数。
这个参数是一个字符串。
用这个字符串来形容你要输出的路径。

把文件输出到指定的目录。

用法:

gulp.dest('./')

5功能的介绍

·拷贝文件(自带的)

    gulp.task('copy',function(){
        gulp.src('./index.html')
            .pipe(gulp.dest('./html/'))
    })

把 与gulpfile.js 同级目录的 index.html 拷贝到 ./html/ 目录下。

·合并文件(gulp-concat)

    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/ 目录下。

·压缩css(gulp-clean-css)

    var mincss = require('gulp-clean-css')

    gulp.task('minCss',function(){
        gulp.src('style.css')
            .pipe(mincss())
            .pipe(gulp.dest('./css/'))
    })

将 style.css 压缩 并输出到 ./css/ 目录下

·重命名文件(gulp-rename)

    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/ 目录下。

·压缩图片(gulp-imagemin)

    var minimg = require('gulp-imagemin')

    gulp.task('minImage',function(){
        gulp.src('./image.png')
            .pipe(minimg())
            .pipe(gulp.dest('./image/'))
    })

将 image.png 压缩并输出到 ./image/ 目录下 (不仅仅支持.png)。

·压缩html(gulp-htmlmin)

    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/ 目录。

·压缩js(gulp-uglify)

    var uglify = require('gulp-uglify')

    gulp.task('minJs',function(){
        gulp.src('./js.js')
            .pipe(uglify())
            .pipe(gulp.dest('./js/'))
    })

压缩 js.js 并且 将压缩过后的文件输出到 ./js/目录下。

·编译sass(gulp-sass)

    var compilesass = require('gulp-sass')

    gulp.task('compileSass',function(){
        gulp.src('./style.sass')
            .pipe(compilesass())
            .pipe(gulp.dest('./css/'))
    })

将 style.sass 编译成 style.css 并输出到 ./css/目录下。

·编译less(gulp-less)

    var compileless = require('gulp-less')

    gulp.task('compileLess',function(){
        gulp.src('./style.less')
            .pipe(compileless())
            .pipe(gulp.dest('./css/'))
    })

将 style.less 编译成 style.css 并输出到 ./css/目录下。

·启动服务(gulp-connect)

    var connect = require('gulp-connect')

    gulp.task('httpServer',function(){
        connect.server({
            port:8080,
            livereload:true
        })
    })

启动一个基于http、端口为8080的前端服务器。

注意 connect 不通过 gulp.src().pipe(connect()) 这种形式调用。

·监听文件变化(gulp-watch)

    var watch = require('gulp-watch')

    gulp.task('watch',function(){
        gulp.watch('./js.js',['minJs'])
    })

监听 js.js 的变化并立即进行压缩。

注意: watch 会自动挂载到 gulp 下 不通过gulp.src().pipe(watch()) 这种形式调用。

·使用gulp-watch + gulp-connect 实现 当代码更改并保存时自动刷新浏览器

    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'])

生成md5版本号

  var rev = require('gulp-rev');
gulp.task('default', function() {
        gulp.src('src/js/index.js')
            .pipe(rev()) //随机生成md5版本号
            .pipe(gulp.dest('dest'))
            .pipe(rev.manifest()) //文件路径替换文件
            .pipe(gulp.dest('dist/js'));
    })

删除文件

    var clean = require('gulp-clean')
    gulp.task('cleanfile', function() {
         gulp.src('dist')
            .pipe(clean())
    })