构建工具gulp简单使用

gulp是一种前端构建工具，具体的作用是代替人工进行图片压缩，css压缩，js检查和压缩，html压缩，文件重命名，文件合并，自动加载插件等等。只是一个工具，不具备代码打包编译等功能。想要也行，加载相应的插件。
介绍和使用 前端构建工具gulpjs的使用介绍及技巧

1.gulpfile.js

这是gulp的基本文件，代码全部写在里面

var gulp = require('gulp');
gulp.task('default',function(){
    console.log('hello world');
});

里面可以自定义task的名称，比如上面这个task defalut的任务就是打印hello world
使用gulp taskname进行运行task

2.gulp api介绍

有四个API，gulp.task,gulp.src,gulp.dest,gulp.watch

• gulp.src()用来获取流，其中可以使用类似正则表达式一样的匹配模式来匹配需要处理的文件或者流
• gulp.dest()用来将流写到文件中去
  .pipe(gulp.dest('dist/foo.js'));使用pipe管道控制流的去向
• gulp.task(name [, deps], fn) name是任务名，deps是可选项，代表依赖，可以有多个。如果想执行多个任务，就写一个任务，把这多个任务当做依赖，就会先执行这多个依赖的任务了。fn是执行的方法。
• gulp.watch(文件匹配，tasks) 用来监视文件的变化

3.gulp中常用插件使用

gulp所有的task内的操作都是通过插件来进行的，所以说gulp只是一个工具，用来执行这些插件的工具

（1）重命名插件gulp-rename

var gulp = require('gulp'),
    rename = require('gulp-rename'),
    uglify = require("gulp-uglify");
 
gulp.task('rename', function () {
    gulp.src('js/jquery.js')
    .pipe(uglify())  //压缩
    .pipe(rename('jquery.min.js')) //会将jquery.js重命名为jquery.min.js
    .pipe(gulp.dest('js'));
    //关于gulp-rename的更多强大的用法请参考https://www.npmjs.com/package/gulp-rename
});

将一个js压缩后，重命名为min.js，放到另一个文件夹下

（2）js的压缩插件gulp-uglify

上面的重命名事例中也包含了js的压缩

（3）css文件的压缩插件gulp-minify-css

var gulp = require('gulp'),
    minifyCss = require("gulp-minify-css");
 
gulp.task('minify-css', function () {
    gulp.src('css/*.css') // 要压缩的css文件
    .pipe(minifyCss()) //压缩css
    .pipe(gulp.dest('dist/css'));
});

这些插件的基本使用都很简单，直接在管道上面填上方法名就行

（4）html的压缩插件npm install --save-dev gulp-minify-html

var gulp = require('gulp'),
    minifyHtml = require("gulp-minify-html");
 
gulp.task('minify-html', function () {
    gulp.src('html/*.html') // 要压缩的html文件
    .pipe(minifyHtml()) //压缩
    .pipe(gulp.dest('dist/html'));
});

（5）js代码检查插件gulp-jshint

var gulp = require('gulp'),
    jshint = require("gulp-jshint");
 
gulp.task('jsLint', function () {
    gulp.src('js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter()); // 输出检查结果
});

（6）文件合并插件gulp-concat

var gulp = require('gulp'),
    concat = require("gulp-concat");
 
gulp.task('concat', function () {
    gulp.src('js/*.js')  //要合并的文件
    .pipe(concat('all.js'))  // 合并匹配到的js文件并命名为 "all.js"
    .pipe(gulp.dest('dist/js'));
});

（7）图片压缩插件gulp-imagemin

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant'); //png图片压缩插件

gulp.task('default', function () {
    return gulp.src('src/images/*')
        .pipe(imagemin({
            progressive: true,
            use: [pngquant()] //使用pngquant来压缩png图片
        }))
        .pipe(gulp.dest('dist'));
});

imagemin本身也是一个插件，里面包含有很多的图片处理库。其中pngquant就是其中一个

（8）自动刷新插件 gulp-livereload

代码变化时，可以自动刷新页面

（9）打包成zip工具gulp-zip