gulp的实时刷新、代码压缩、代码排错

gulp的学习

一：什么是gulp？

??简而言之，gulp是一种工具，是一种前端工具，是一种在前端开发过程中对代码进行构建的工具。
作用：对网站资源优化，比之前流行的工具grunt构建项目过程重复率低，可以愉快的编写代码。
具体作用：网页自动刷新、CSS预处理、代码检测、压缩图片、等等…… 只需用简单的命令就能全部完成，让你把重点放在功能开发上；同时减少人为失误，提高开发效率和项目质量，让专注更为专注。

二：为什么使用Gulp而不使用Grunt?

三：gulp核心API用法？

四：gulp安装配置？

??gulp的安装很简单，在这我就不一一讲解，只看代码：

//全局安装
npm install -g gulp
//本地安装，项目开发一般就是本地安装
npm install gulp --save-dev

注：
1.–save：将保存配置信息至package.json（此文件在 node_modules\gulp 目录下）
2.-dev：将它作为你的项目依赖添加到中devDependencies内（–save和-dev是2个东西，记得分清前面的”-“号）
3.由于Gulp会自带package.json文件（用于存储项目的元数据），所以这里只做简单介绍（如果你想自己创建，也可通过命令 npm init，然后根据引导填写相关信息）：
我们在某个文件夹下面初始化一个目录：

npm init

然后会创建一个项目，然后该文件夹羡慕就出现一个package.json文件，记录了该项目的所有信息：

//目前是初始化，信息比较少
{
  "name": "02gulp",//模块名称：只能包含小写字母数字和中划线，如果为空则使用项目文件夹名称代替（必填）
  "version": "1.0.0",//版本号（必填）
  "description": "", //描述：会在npm搜索列表中显示
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

然后我们在该目录下安装gulp，安装完gulp后我们安装插件：

npm install gulp --save-dev
//例如我们通过gulp-livereload 和 gulp-webserver插件，来实现页面自动刷新，如需要安装其他插件，需要按照此方法安装
npm instal gulp-livereload  --save-dev
npm instal gulp-webserver  --save-dev

五：Gulp任务配置（Task Configuration）？

5.1.在项目根目录中，创建gulpfile.js文件，用来配置和定义任务（task）。我们在根目录下创建一个src文件夹，src文件夹下面有js和sass等文件夹，下面的例子都是这样的目录，我们处理代码后生成的目录bulid可以先不用创建，因为会自动生成。
5.2.在gulpgile.js文件中填写实时刷新的相关配置：
方法一：用gulp-webserver模块，该模块启动服务器的时候直接打开页面；

var gulp = require('gulp');   //基础库
//引入gulp插件
var livereload = require('gulp-livereload'); //网页自动刷新 （服务器控制客户端同步刷新）
    webserver = require('gulp-webserver');   // 本地服务器

//注册服务
gulp.task('webserver',function(){
    gulp.src('./')              //服务器目录(./代表根目录)
    .pipe(webserver({           //运行gulp-webserver
        livereload:true,        //启用livereload
        open : true             //服务器启动时自动打开网页
    }))
})
//定义html任务
gulp.task('html',function(){
    gulp.src('src/*.html')
        .pipe(gulp.dest('bulid'))
});
// 监听任务
gulp.task('watch',function(){
    gulp.watch('*.html',['html'])    //监听根目录下所有.html文件
});
//默认任务
gulp.task('default',['webserver','watch','html']);

当然，在执行过程中我们需要在根目录下创建一个html文件，然后执行gulp，然后相当于执行了gulpfile.js中的默认任务，如果我们需要实时刷新，我们就需要执行特定任务：gulp webserver,然后我们修改html文件，在浏览器中就可以实时看到效果了。
方法二：第二种自动刷新的方法是安装gulp-connect模块，同样是上面的目录：

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat'),
    rename = require('gulp-rename'),
    connect = require('gulp-connect');
//定义名为js的任务，该方法可以压缩、重命名和合并js代码，下文会讲明白的
gulp.task('js',function(){
    gulp.src('./src/js/*.js')
        .pipe(concat('main.js'))
        .pipe(gulp.dest('bulid/js'))
        .pipe(rename({suffix:'.min'}))
        .pipe(uglify())
        .pipe(gulp.dest('bulid/js'))
        .pipe(connect.reload())
});
//定义html任务
gulp.task('html',function(){
    gulp.src('./src/*.html')
        .pipe(gulp.dest('./bulid'))
        .pipe(connect.reload());
});
//定义livereload任务
gulp.task('connect',function(){
    connect.server({
        livereload : true
    })
});
//定义监听任务watch
gulp.task('watch',function(){
    gulp.watch('src/*.html',['html']);
    gulp.watch('src/js/*.js',['js']);
});

//定义默认任务
gulp.task('default',['js','html','watch','connect']);

5.3.实时刷新并且压缩js代码的相关配置
??下面的方法是用gulp-webserver模块，服务器启动时自动打开网页
当然我们需要提前配置好gulp-concat和gulp-rename

var gulp = require('gulp');   //基础库
//引入gulp插件
var livereload = require('gulp-livereload'), //网页自动刷新 （服务器控制客户端同步刷新）
    webserver = require('gulp-webserver'),   // 本地服务器
    uglify = require('gulp-uglify'),
//注册实时刷新服务
gulp.task('webserver',function(){
    gulp.src('src')             //服务器目录(./代表根目录)
    .pipe(webserver({           //运行gulp-webserver
        livereload:true,        //启用livereload
        open : true             //服务器启动时自动打开网页
    })) 
}) 
//压缩JavaScript文件
gulp.task('minify',function(){
    gulp.src('./src/js/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('bulid/js'))
});
//定义html任务
gulp.task('html',function(){
    gulp.src('src/*.html')
        .pipe(gulp.dest('bulid'))
});
// 监听任务
gulp.task('watch',function(){
    gulp.watch('*.html',['html'])    //监听根目录下所有.html文件
    gulp.watch('src/js/*.js',['minify']);
});
//默认任务
gulp.task('default',['html','minify','webserver','watch']);

5.3.实时刷新、压缩、排错、合并代码的相关配置
??排错我们当然需要用到gulp-jshint这个著名的插件了，合并代码我们需要用到gulp-concat来合并好多的js到一个js下面，这样可以减少js的请求次数，有利于用户体验。自己安装吧！，配置如下：