Gulp入门安装及应用二

gulp的使用：

1.建立gulpfile.js文件

var gulp = require('gulp'); //导入gulp模块 重要

gulp.task('default',function(){ //default：任务名

console.log('hello.world');

})

2.运行gulp任务 gulp 任务名

3.gulp API

（1） gulp.src() 主要导入文件流，通过导入文件的匹配路径，导入后就形成一个工作流，然后通过管道自动的构建操作

例如： gulp.src(['js/*.js','css/*.css','*.html'])

（2） gulp.dest() 目标操作，经过src导入的工作流经过处理之后输出到的目标

例如：

var gulp = require('gulp'); //导入gulp模块

gulp.src('script/jquery.js').pipe(gulp.dest('dist/foo.js')) //最终生成的文件路径为dist/foo.js/jquery.js'，dist/foo.js是指目录

（3） gulp.task() gulp要在task中指定任务名，缺省时就是‘default’

语法：gulp(name,[deps]，function) //任务名，所依赖的其他任务，任务函数

例如：

var gulp = require('gulp'); //导入gulp模块 重要

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

//one任务是一个异步执行的任务

settimeout(function(){

console.log('one is done')

},5000)

})

gulp.task('two',['one',]function(){ //先one 再twos

console.log('two is done');

})

命令行输入：gulp one

命令行输入：gulp two

（4） gulp.watch() 观察，如果我们指定的文件路径下的文件发生改变的话，我们就可以侦测到，并作出相应的变化

例如：

var gulp = require('gulp'); //导入gulp模块 重要

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

console.log(event.type); //变化类型 added为新增；deleted为删除；changed为改变

console.log(event.path); //变化的文件的路径

})

4.gulp常用插件

（1） js代码检查

安装：

命令行输入：cnpm install --save-dev gulp-jshint

这里出现了一个问题，提示我们要安装jshint，所以在命令行直接输入cnpm install gulp-jshint

这样就好啦!

使用：

var gulp = require('gulp'); //导入gulp模块 重要

jshint = require('gulp-jshint');

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

gulp.src('script/*.js')

.pipe(jshint())

.pipe(jshint.reporter()); //输出检查结果

})

运行任务命令行输入：gulp jsLint

出现这个则说明代码无误。

这里我们的js代码本来就是正确的，所以运行出来肯定是无误的，如果我们将js代码修改成错误的呢，比如：

再次在命令行输入:gulp jsLint

就会提示第二行有错误，当我们把代码重新修改好之后呢

命令行输入：gulp jsLint

就又是正确的啦，这样就起到了js代码检查的作用。

（2） 重命名

安装：

命令行输入：cnpm install --save-dev gulp-rename

使用：

var gulp = require('gulp'); //导入gulp模块 重要

uglify = require('gulp-uglify');

rename = require('gulp-rename')；

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

gulp.src("script/*.js") //要压缩的js文件

.pipe(uglify()) //使用uglify进行压缩

.pipe(rename('jquery.min.js')) //会将jquery.js重命名为jquery.min.js

.pipe(gulp.dest('dist/js')) //压缩后的路径

})

命令行输入：gulp rename

压缩并重名后：

（3） js文件压缩

安装：

命令行输入：cnpm install --save-dev gulp-uglify 压缩插件

使用：

var gulp = require('gulp'); //导入gulp模块 重要

uglify = require('gulp-uglify');

gulp.task('minify-js',function(){

gulp.src("script/*.js") //要压缩的js文件

.pipe(uglify()) //使用uglify进行压缩

.pipe(gulp.dest('dist/js')) //压缩后的路径

})

命令行输入：gulp minify-js

压缩后：

注：上述使用中的代码均在gulpfile.js中写入

（4） css文件压缩

（5） html文件压缩

（6） 文件合并

（7） 图片压缩

（8） 自动刷新

（9） less和sass的编译

（未完 待更新~~~ 前端新人，如有错误，欢迎指正！）