自动化构建工具gulp简单介绍及使用

一、简介及安装：

　　gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率

gulp的优点：基于流的操作、任务化。

常用api：src 、dest、watch、task、pipe

由于gulp是基于node的所以使用的时候需要通过npm或者cnpm安装全局安装（cnpm i -g gulp）

常用的gulp需要安装的包括gulp-clean   gulp-connect   gulp-concat    gulp-cssmin    gulp-imagemin    gulp-less  gulp-load-plugins  gulp-uglify  open

安装以上的gulp插件可以使用cnpm i --save-dev xxx(--save-dev可以使安装的插件的依赖保存在package.json中),同时有一种快捷的方式可以一次性安装多个，每个组件之间使用空格隔开cnpm i --save-dev gulp-concat gulp-connect等

安装完以上插件，package.json的文件会添加下面的依赖。

二、使用

　　首先需要创建一个gulpfile.js文件，使用require引入gulp模块，同时引入gulp-load-plugins模块（引入该模块的目的是为了当以后想要引入gulp-connect等插件的时候，可以通过$直接引入，这样比较方便）

下面结合具体的实例对以上进行说明：（具体的已经给出注释说明）

　　

 var gulp = require('gulp');
 //引入gulp-load-plugins模块 注意要将其实例化
 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())//编译less文件
   .pipe(gulp.dest(app.devPath + 'css'))
   .pipe($.cssmin())//压缩css文件
   .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'))//将js文件合并到index.js文件中
   .pipe(gulp.dest(app.devPath + 'js'))
   .pipe($.uglify())//压缩js文件
   .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']);

由于刚开通博客，不怎么会排版，写得知识也只是个人理解，如果问题请指出。希望大神们多多指教。