Gulp简单学习

Gulp 特点

易于使用
构建快速
插件高质量
易于学习

安装

全局安装： npm install –global gulp
作为项目开发依赖安装： npm install –save-dev gulp

运行gulp

在项目根目录创建一个名为gulpfile.js的文件
使用gulp命令运行： gulp （运行默认的任务）

原理

在gulpfile.je或gulpfile.babel.js里定义任务，通过gulp命令执行任务。

如何定义任务

gulpfile.js

import gulp from 'gulp'
gulp.task('css', ()=>{
    return gulp.src('app/**/*.css')//获取源文件的css文件， 
        .pipe(gulp.dest('server/public'))//将css文件原封不动的拷贝到server目录去
})

scripts.js

import gulp from 'gulp'
import gulpif from 'gulp-if'
import concat from 'gulp-concat'
import webpack from 'webpack'
import gulpWebpack from 'webpack-stream'
import named from 'vinyl-named'
import livereload from 'gulp-livereload'
import plumber from 'gulp-plumber'
import rename from 'gulp-rename'
import uglify from 'gulp-uglify'

gulp.task('scripts', ()=> {
    return gulp.src(['app/js/index.js'])//打开文件
        .pipe(plumber({//错误处理
            errorHandler: function(){
            }
        }))
        .pipe(named())//重命名
        .pipe(gulpWebpack({
            module:{
                loaders: [{
                    test: /\.js$/,
                    loader: 'babel-loader'
                }]
            }
        }), null, (err, stats)=>{
            log(`Finished ${color.cyan('scripts')}`, stats.toString({}
                chunks: false
            ))  
        })
        .pipe(gulp.dest('server/public/js'))
        .pipe(rename({
            basename: 'cp',
            extname: 'min.js'   
        }))
        .pipe(uglify({
            compress: {
                properties: false   
            },
            output:{
                'quote_keys': true
            }   
        }))//压缩
        .pipe(gulp.dest('server/public/js'))
        .pipe(gulpif(args.watch, livereload()))//当文件改变了以后自动刷新： 使用gulpif做判断， 执行livereload()
})

以上写了两个文件，分别定义了css任务，和scripts任务。其中scripts任务可以通过模块引入到gulpfile.js中。

注意：

从以上代码可以看出，使用gulp.task 定义任务；在任务的回调中，返回这个任务是怎么操作的。

任务基本流程是：

使用的gulp.src()获取我们要处理的源文件

使用pipe()方法依次给源文件做相应处理

使用gulp.dest()方法将源文件输出

多说一句

gulp中的每个任务，以流的形式处理源文件文件。可以比作水管，水管中流的水就是我们的源文件，用gulp.src方法将我们的源文件流入到水管中， pipe就好比水管中的节点，在节点处我们可以截获水流，并做一些我们想要做的事，gulp中一般使用第三方插件来做该处理， gulp.dest就是水管的出口

gulp API

gulp.src(globs[, options])

输出符合所提供的匹配模式或匹配模式的数组的文件。 将返回一个vinyl files的stream它可以被piped到被的插件中

gulp.dest(path[, options])

能被pipe进来， 并将会写文件。 并且重新输出所有数据， 因此你可以将它pipe到多个文件夹。 如果不存在， 将会自动创建它。 
gulp.src('./client/templates/*.jade')
    .pipe(jade())
    .pipe(gulp.dest('./build/template'))
    .pipe(minify())
    .pipe(gulp.dest('./build/minified_templates'))

gulp.task(name[, deps], fn)

定义一个使用Orchestrator实现的任务（task）
gulp.task('somename', function(){
    //做一些事
})
deps： 类型Array
一个包含任务列表的数组， 这些任务会在你当前任务运行之前完成
gulp.task('mytask', ['array', 'of', 'task', 'name' ], function(){
    //做一些事  
})

gulp.watch(glob[, opts], tasks)或者gulp.watch(glob[, opts, cb])

监听文件， 并且可以在文件发生改动时候做一些事。 它总会返回一个EventEmitter来发射(emit)change事件。

gulp常用插件

gulp-if //有条件的运行一个任务

gulp-live-server

gulp-concat //合并文件

webpack

webpack-stream

vinyl-named

gulp-rename //重命名文件

gulp-sequence

del //删除dest文件

gulp.filter//在虚拟文件流中过渡过滤文件

gulp-uglify//压缩js文件大小

gulp-csso //压缩优化css

gulp-html-minify//压缩html

gulp-imagemin//压缩图片

gulp-zip//zip雅座文件

gulp-autoprefixer//自动为css添加浏览器前缀

gulp-sass//编译sass

gulp-babel//将ES6编译为es5

https://github.com/lin-xin/blog/issues/2