gulp工具的使用

一、安装

Gulp-自动化开发工具

1、 压缩js

　　2、  压缩css

　　3、  压缩less

　　4、  压缩图片

　　等等…

npm install gulp -g 全局安装,安装完成后，输入gulp –v查看是否安装成功。

二、压缩javascript

1、配置文件:我将这个js文件取名叫 gulpfile ( 且必须取为gulpfile名，否则在node环境下运行是，会报错：No gulpfile found)

2、进入配置文件所在的目录

再安装一次 gulp npm install gulp ，原因就是，gulp就这么设置的，避免发生版本冲突。

在配置文件中依赖的模块都要下载到本地 npm install gulp-uglify ,安装好后，会发现在相应目录下会多出个node_modules的文件夹，里面就涵盖了我们安装的模块。

运行：用gulp命令，如下（'firstScript'为刚才自定义的任务名）：gulp firstScript

npm install gulp-watch-path这个模块，就可以做到修改了什么，就实时压缩对应文件，而不是盲目地全压缩

npm install gulp-rename 这个模块，用于重命名压缩后的文件。

gulpfile.js：

//引入gulp

var gulp=require('gulp');

//引入压缩js的gulp-uglify模块

var uglify=require('gulp-uglify');

//引入gulp-watch-path，只是压缩改变的那部分而不是每次改动代码都将文件夹下所有文件都压缩

var watchPath = require('gulp-watch-path');

//引入gulp-rename,用于重命名压缩后的文件

var rename = require('gulp-rename');

//firstScript是自定义的一个服务名，匿名函数是firstScript的具体任务

gulp.task('firstScript',function(){

gulp.src('script/*.js') //要压缩的是script文件夹下的所有文件

.pipe( uglify ()) //uglify是调用压缩js的方法

.pipe( rename ({suffix: '.min'})) //给压缩后的文件，添加min后缀名

.pipe(gulp. dest ('newscript')); //gulp.test是将压缩文件另存为的方法

})

//新增一个auto任务，让自动压缩不用每次改动后再运行，会一直运行，一有改动就压缩

gulp.task('auto', function(){

//利用watch方法监听script下的js文件，如果变动，则执行firstScript任务，但是这样做效率不高

//gulp.watch('script/*.js', ['firstScript']);

//event为gulp.watch回调函数中的event

gulp.watch('script/*.js', function(event){

var paths = watchPath(event, 'script', 'newScript');//使用watch-path仅仅压缩改变的部分

gulp.src(paths.srcPath)

.pipe(uglify())

//paths.distDir为目录文件，如果换成paths.distPath，会报错：file already exists

//给压缩后的文件，添加min后缀名

.pipe(rename({suffix: '.min'}))

.pipe(gulp.dest(paths.distDir));

});

});

//将需要默认执行的任务名，添加到default任务中，如，添加上面的‘auto’任务,这样在node环境下就可以通过gulp + 回车，去执行default中的相关任务。

gulp.task('default',['auto']);

使用ctrl+c强制退出

三、类似的：CSS、LESS、图片等的压缩与上述其实是一样的道理，唯一的不同就是它们所引入的压缩包不一样。

如：

　　CSS     -----    对应gulp-minify-css模块 压缩命令为minifycss()

　　LESS    -----    对应gulp-less模块 压缩命令less()

　　图片    -----    对应gulp-imagemin模块

　　...