gulp压缩工具

gulp中文网 已经是一个不错的中文教程

gulp

1，起步

gulp构建工具基于node环境，安装配置好node环境后，通过npm安装gulp包npm install gulp -g，之后可以通过gulp -v检查是否安装成功和检测gulp版本。

install gulp

2，了解并使用gulp

2.1 介绍

gulp是一个基于流(stream)的构建工具，可以自动执行指定的任务，简洁且高效，压缩js，css，img大同小异，以下以压缩js为例。

2.2 压缩

1. 压缩其他文件需要创建一个gulpfile.js的脚本，并在脚本中引入gulp和所需gulp包

//压缩javascript
//引入gulp
var gulp = require('gulp')
//引入gulp-uglify，用于压缩js
var uglify = require('gulp-uglify')
//引入gulp-watch-path,用于监听js文件变动
var watchPath = require('gulp-watch-path')
//引入gulp-rename模块，用于给压缩后的文件易名
var rename = require('gulp-rename')

2. 设置任务

//'firstScrip't为自定义任务名，第二个参数为'firstscript'具体任务
gulp.task('firstScript',()=>{
    //即将压缩的js文件路径
    gulp.src('script/*.js')
    //uglify()是调用压缩的方法，去压缩js
    .pipe(uglify())
    //执行压缩方法之后，将压缩文件易名，并存入新的文件夹中
    .pipe(rename({suffix:'.min'}))
    //gulp.dest是将压缩后的文件另存为哪的方法，如存到newScript文件夹中
    .pipe(gulp.dest('newScript'))
})

任务设置好之后，可以在命令行使用gulp task来执行任务

task

2.3观察

每次代码更改，执行压缩任务都要重新输入，gulp引入了watch监听器，监听下的文件如果发生变化，将自动执行任务。

//新增一个gulp任务
gulp.task('auto',()=>{
    //利用watch方法监听script下的js文件，如果变动，则执行(指定的)firstscript任务
    gulp.watch('script/*.js',(event)=>{
        var paths = watchPath(event,'script','newScript')
        //即将压缩的文件路径为指定的变动的.script文件
        gulp.src(paths.srcPath)
        //执行压缩方法
        .pipe(uglify())
        //执行压缩方法之后，将压缩文件易名，并存入新的文件夹中
        .pipe(rename({suffix:'.min'}))
        //paths.distDir为目录文件，如果换成paths.disPath，会报错:file already exists
        .pipe(gulp.dest(paths.distDir))
    })
})

以上采用gulp.watch方法，监听了script文件下的所有.js后缀文件，每当其中的js文件发生改变并保存，watchPath获取事件，变动文件名，目标文件名三个参数，返回一个paths路径对象，通过管道流，自动执行gulp操作

2.4 默认

为了不用每次都输入gulp+任务名，gulp引入了默认任务，在命令行直接输入gulp，自动执行默认任务。

//将需要默认执行的任务名，添加到default任务中，如，添加上面的'auto'任务
gulp.task('default',['auto'])

自动执行任务，监听script下的.js文件