1.Gulp是什么
简单来说Gulp就是一个自动任务处理器，用来帮助前端简化开发流程的工具。比如一些和文件相关的操作，去把Sass和Less编译成Css，去合并JavaScript，然后压缩js.然后自动刷新浏览器，这些操作，Gulp都能帮你完成。
2.Gulp的安装和使用
一:在全局范围内安装gulp
sudo npm install -g gulp
二:进入项目目录，初始化项目
npm init
期间会问一些问题，比如项目名称，版本，描述等。回车即可
三:在项目目录中安装gulp
npm install gulp --save-dev
加了--save-dev表示将gulp加入开发依赖
当node_moudles这个目录不存在时，直接运行npm install，会自动将开发依赖都安装好
四:创建要执行的任务
在项目跟目录中，创建一个文件，gulpfile.js
在gulpfile.js中定义要执行的任务
五:编辑你所需要执行的任务
先require需要的模块
var gulp = require('gulp');
编辑任务
gulp.task('hello', funciton(){
console.log('xx')
});
task任务，有两个参数，前面的参数为任务名字hello，后面为一个匿名函数，也就是这个任务需要做的事情。
六:执行任务
gulp hello
直接gulp+任务名字就好了
还有一种方式，就是把要执行的命名都加入default任务中，
gulp.task('default', ['hello'])
运行gulp命令之后，就会执行所有的default任务。
七:gulp的两个主要功能
读取想要处理的文件，把处理好的文件放到指定的地方
gulp.src()找出文件
.pipe 处理文件
.pipe(gulp.dest()) 放到指定目录
八:将单个文件复制到另外一个地方
gulp.task('copy-index', function(){
return gulp.src('index,html').pipe(gulp.dest('dist'))
});
九:将多个文件复制到另外一个地方
gulp.task('images', function(){
return gulp.src('images/*.{png,jpg}').pipe(gulp.dest('dist/images'))
});
十:使用多个globs
gulp.task('data', function(){
return gulp.src(['xml/.xml','json/.json']).pipe(gulp.dest('dist'))
});
多个想要处理的文件，用数组来包装起来，想到排除的文件用!来表示，例如!json/secret-*.json
十一:设置依赖任务
gulp.task('bulid', ['copy-index','images','data'],function(){
console.log('编译成功');
});
在执行build任务之前，会先去执行[]中三个所依赖的任务，三个依赖任务是同时执行的
十二:监视文件，在文件变化时，立即执行任务
gulp.task('copy-index', function(){
gulp.watch('index,html', ['copy-index']);
gulp.watch('index,html', ['copy-index']);
gulp.watch('index,html', ['copy-index']);
gulp.watch('index,html', ['copy-index']);
});
指的是文件发生变化后，执行后面[]里的任务
十三:使用插件扩展gulp的功能
编译sass，自动刷新浏览器等
使用方法一般如下：
1.先安装需要使用的插件，例如：gulp-sass
sudo npm install gulp-sass --save-dev
2.在gulpfile.js设置任务
先把插件require进来
var sass = require('gulp-sass')
编辑任务
gulp.task('sass', function(){ return gulp.src('stylesheets/**/*.scss').pipe(sass()).pipe(gulp.dest('dist/css')) });
十四:创建本地服务器
1.先安装需要使用的插件
sudo npm install gulp-connect --save-dev
2.在gulpfile.js设置任务
var connect = require('gulp-connect')
编辑任务
gulp.task('server', function(){ connect.server({ root: 'dist' }); });
十五:实时刷新浏览器
将server方法里的livereload设置为true
gulp.task('server', function(){ connect.server({ root: 'dist' livereload: true }); });
然后在需要实时刷新浏览器的任务中启用.pipe(connect.reload());
新建一个任务，执行gulp的时候，自动监视和启动服务器
glup.task('default', ['server','watch']);
其他插件的用法，在npm官网上找到相应插件，看说明文档即可。
网友评论