gulp是一个自动化的前端工具。它可以利用自身的插件来实现一些功能,如sass、less编译;浏览器自动刷新,文件压缩、重命名、代码校验(个人使用sublime的插件进行校验)等功能。当然这些功能也可以通过其他手段来实现,但是gulp实现的功能比较全面、快速、而且具有选择性(每个人都可以利用它来实现自己需要的功能)。
1.gulp安装
1)首先安装node环境
2)node全局安装gulp(npm install -g gulp),如果安装不上可使用淘宝镜像(cnpm install -g gulp)
2.gulp插件的使用
安装好gulp之后现在就需要使用gulp实现一些功能。
例如:实现js压缩并重命名
1)命令行切换到工程目录下,在工程目录下安装gulp(cnpm install gulp --save-dev)
2)在工程目录下安装gulp-uglify(压缩js的插件)和gulp-rename(文件重命名插件)。
3)然后在项目的根目录下新建文件gulpfile.js。
4)在gulpfile.js中的代码如下:
1 //引入gulp 、gulp-rename、gulp-uglify
2 var gulp = require('gulp'),
3 rename = require('gulp-rename'),
4 uglify = require('gulp-uglify');
5 //定义任务名称‘uglify’
6 gulp.task('uglify',function(){
7 //选择文件路径
8 gulp.src('script/angular/angular-1.4.6.js')
9 //使用uglify压缩
10 .pipe(uglify())
11 //对文件进行重命名
12 .pipe(rename('angular-1.4.6.min.js'))
13 //文件的输出路径
14 .pipe(gulp.dest('script/angular'))
15 });
5)在命令行中执行guip uglify
3.gulp常用的api
1)gulp.task() 定义一个gulp任务
2)gulp.src() 定义文件的路径
3)gulp.dest() 定义文件的输出路径
4)gulp.watch()对文件进行监听
4)个人常用的gulp插件(后面依次介绍)
1)sass编译(也可以实现less编译,只是使用的插件不同)
2)自动添加浏览器前缀(如-webkit、 -ms、-moz、-o 等),貌似根据caniuse的数据来进行浏览器前缀的添加。
3)html、css、js文件的压缩、合并重名等
4)浏览器的自动刷新
等等。。