gulp

1 先说它是什么，再说它能干嘛，能帮助我们在工作中怎样避免一系列的麻烦与错误，我是小可爱
基于流式的前端自动化构建工具（
基于流：pipe()管道一个任务完了再进行一个任务，就像流水线一样、
自动化构建工具：我们在工作中写代码的时候，可能就那样写了？
木有问题，可是后面代码越写越多，我们还要引入许许多多的第三方js,jq,an
以及大量地插件，angular的每个ctrl,config,可能不多，都会引入，有人说上线时，我们合并，压缩不就得了，后面你就知道改起来有多麻烦了，js源码文件一定要有吧
）

so ,它解决了这些问题，例如less--->css
压缩
合并
复制（发布目录，生产目录，源码）
热重载（自己开启一个服务器，每次修改不用刷新页面就能实时的看到修改的地方，写css爽爆了有木有）
二常用api
** src();**
** dest()；复制**
** watch()；检测**
** task()；任务**
** pipe()；流，管道**

三 正式使用
1 安装：全局 npm install gulp -g
** 本地 npm install gulp --save-dev( 放在package.json里面，一些app信息，依赖信息)【注意】本地安装先要进项目所在目录 cls cd
2 初始化
** ** npm init (生成package.json)
3 现在就可以让它工作了，那它究竟是怎么样工作的？？
** 在配置文件里面编写一个一个任务，然后运行这个任务

gulpfile.js
常用模块{
1 gulp
2 gulp-load-plugins 加载器，加载css、图片呀，插件，webpack叫转化器
3 open
}

1 引入要用的模块
var gulp = require('gulp') ; //用它就叫它来
var $ = require('gulp-load-plugins')();
var open = require('open');
**2 **
<pre>
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var open = require('open');

var app = {
srcPath: 'src/',
devPath: 'build/',
prdPath: 'dist/'
};

gulp.task('lib', function() {
gulp.src('bower_components/*/.js')
.pipe(gulp.dest(app.devPath + 'vendor'))
.pipe(gulp.dest(app.prdPath + 'vendor'))
.pipe($.connect.reload());
});

gulp.task('html', function() {
gulp.src(app.srcPath + '*/.html')
.pipe(gulp.dest(app.devPath))
.pipe(gulp.dest(app.prdPath))
.pipe($.connect.reload());
})

gulp.task('json', function() {
gulp.src(app.srcPath + 'data/*/.json')
.pipe(gulp.dest(app.devPath + 'data'))
.pipe(gulp.dest(app.prdPath + 'data'))
.pipe($.connect.reload());
});

gulp.task('less', function() {
gulp.src(app.srcPath + 'style/index.less')
.pipe($.plumber())
.pipe($.less())
.pipe(gulp.dest(app.devPath + 'css'))
.pipe($.cssmin())
.pipe(gulp.dest(app.prdPath + 'css'))
.pipe($.connect.reload());
});

gulp.task('js', function() {
gulp.src(app.srcPath + 'script/*/.js')
.pipe($.plumber())
.pipe($.concat('index.js'))
.pipe(gulp.dest(app.devPath + 'js'))
.pipe($.uglify())
.pipe(gulp.dest(app.prdPath + 'js'))
.pipe($.connect.reload());
});

gulp.task('image', function() {
gulp.src(app.srcPath + 'image/*/')
.pipe($.plumber())
.pipe(gulp.dest(app.devPath + 'image'))
.pipe($.imagemin())
.pipe(gulp.dest(app.prdPath + 'image'))
.pipe($.connect.reload());
});

gulp.task('build', ['image', 'js', 'less', 'lib', 'html', 'json']);

gulp.task('clean', function() {
gulp.src([app.devPath, app.prdPath])
.pipe($.clean());
});

gulp.task('serve', ['build'], function() {
$.connect.server({
root: [app.devPath],
livereload: true,
port: 3000
});

open('http://localhost:3000');

gulp.watch('bower_components//', ['lib']);
gulp.watch(app.srcPath + '/.html', ['html']);
gulp.watch(app.srcPath + 'data//.json', ['json']);
gulp.watch(app.srcPath + 'style//.less', ['less']);
gulp.watch(app.srcPath + 'script//.js', ['js']);
gulp.watch(app.srcPath + 'image//', ['image']);
});

gulp.task('default', ['serve']);
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var open = require('open');