gulp - 基本操作

gulp - 基本操作

1. 基本语法介绍

可以查看官方文档或者 gulp教程之gulp中文API 
一定要先看这个内容，因为这里基本的流程操作设计依赖于这个api的。

2. js合并 contact

先看下面两个文件的内容

//a.js
var newObject = {};  
   
var newObject = Object.create( Object.prototype );  
   
var newObject = new Object(); 

//b.js
function Car(model, year, miles) {  
    var object = Object.create(null);  
  
    /*prototype*/  
    Object.defineProperty( object, "__proto__", {  
        value: Car.prototype,  
        writable: true,  
        enumerable: false,  
        configurable: false  
    })  
  
    object.model = model;  
    object.year = year;  
    object.miles = miles;  
  
    object.output = function () {  
        return function () {  
            return this.model + "走了" + this.miles + "公里";  
        }.call(this);  
    }  
  
    return object;  
}  
  
var car_benchi =  Car('benchi', '2017', '300');  
var car_aodi =  Car('aodi', '2016', '600');  
  
console.log(car_benchi.output === car_benchi.output); //false   

修改gulp.js

// 引入 gulp
var gulp = require('gulp'); 

// 引入组件
var concat = require('gulp-concat');

// 合并文件
gulp.task('scripts', function() {
    gulp.src('./JS-test/js-file/*.js') //
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./JS-test/js-build/'))
});

合并之后可以看到下面的内容

//all.js
var newObject = {};  
   
var newObject = Object.create( Object.prototype );  
   
var newObject = new Object();  
function Car(model, year, miles) {  
    var object = Object.create(null);  
  
    /*prototype*/  
    Object.defineProperty( object, "__proto__", {  
        value: Car.prototype,  
        writable: true,  
        enumerable: false,  
        configurable: false  
    })  
  
    object.model = model;  
    object.year = year;  
    object.miles = miles;  
  
    object.output = function () {  
        return function () {  
            return this.model + "走了" + this.miles + "公里";  
        }.call(this);  
    }  
  
    return object;  
}  
  
var car_benchi =  Car('benchi', '2017', '300');  
var car_aodi =  Car('aodi', '2016', '600');  
  
console.log(car_benchi.output === car_benchi.output); //false  

上面的gulp中我们是使用contact来定义输出后的文件名称，如果在没有使用contact的情况下，我们可以用rename插件，将上面的gulp.js修改

// 引入 gulp
var gulp = require('gulp'); 


// 引入组件
var concat = require('gulp-concat');    //合并文件
var rename=require('gulp-rename');      //文件重命名


// 合并文件
gulp.task('scripts', function() {
    gulp.src('./JS-test/js-file/*.js')
        .pipe(concat('all.js'))
        .pipe(rename('new-name.js'))
        .pipe(gulp.dest('./JS-test/js-build/'))
});

注意这里rename是在最终输出之前去操作文件名称。

2.1 合并的顺序

如果我们要控制js的合并顺序。

第一种方式在gulp.src('./JS-test/js-file/*.js')的时候进行顺序控制

// 合并文件
gulp.task('scripts', function() {
    gulp.src(['./JS-test/js-file/b.js', './JS-test/js-file/a.js'])
        .pipe(concat('all.js'))
        .pipe(rename('new-name.js'))
        .pipe(gulp.dest('./JS-test/js-build/'))
});

第二种方式使用order插件

// 引入 gulp
var gulp = require('gulp'); 


// 引入组件
var concat = require('gulp-concat');    //合并文件
var rename = require('gulp-rename');    //文件重命名
var order = require('gulp-order');      //order 插件


// 合并文件
gulp.task('scripts', function() {
    gulp.src('./JS-test/js-file/*.js')
        .pipe(order([
            'b.js', 
            'a.js'
        ]))
        .pipe(concat('all.js'))
        .pipe(rename('new-name.js'))
        .pipe(gulp.dest('./JS-test/js-build/'))
});

3. js压缩 gulp-uglify

gulp-uglify插件用来进行js文件压缩，我们只需要在上面的基础上添加压缩的流程

// 引入 gulp
var gulp = require('gulp'); 


// 引入组件
var concat = require('gulp-concat');    //合并文件
var rename = require('gulp-rename');    //文件重命名
var order = require('gulp-order');      //order 插件
var uglify=require('gulp-uglify');      //js压缩


// 合并文件
gulp.task('scripts', function() {
    gulp.src('./JS-test/js-file/*.js')
        .pipe(order([
            'b.js', 
            'a.js'
        ]))
        .pipe(concat('all.js'))
        .pipe(uglify()) 
        .pipe(rename('new-name.js'))
        .pipe(gulp.dest('./JS-test/js-build/'))
});

合并之后的文件像这样

function Car(e,t,r){var c=Object.create(null);return Object.defineProperty(c,"__proto__",{value:Car.prototype,writable:!0,enumerable:!1,configurable:!1}),c.model=e,c.year=t,c.miles=r,c.output=function(){return function(){return this.model+"走了"+this.miles+"公里"}.call(this)},c}var car_benchi=Car("benchi","2017","300"),car_aodi=Car("aodi","2016","600");console.log(car_benchi.output==car_benchi.output);var newObject={},newObject=Object.create(Object.prototype),newObject=new Object;

注意：可能不会觉得这样的代码不利于我们在生产环境上去查看出错的地方，首先chorme中可以将这里代码格式化如下红色框内的pretty print,另外我们还可以使用source-map去引入本地代码进行debug（本人还没有学习这个，后面应该会有文章进行学习）。

4. js gulp-jshint

具体的使用可以参考 gulp-jshint使用说明

现在的gulpfile.js修改如下

// 引入 gulp
var gulp = require('gulp'); 


// 引入组件
var concat = require('gulp-concat');    //合并文件
var rename = require('gulp-rename');    //文件重命名
var order = require('gulp-order');      //order 插件
var uglify=require('gulp-uglify');      //js压缩
var jshint = require('gulp-jshint');    //js检查


// 合并文件
gulp.task('scripts', function() {
    gulp.src('./JS-test/js-file/*.js')
        .pipe(order([
            'b.js', 
            'a.js'
        ]))
        .pipe(jshint())                     // 进行检查
        .pipe(jshint.reporter('default'))  // 对代码进行报错提示
        .pipe(concat('all.js'))
        .pipe(uglify()) 
        .pipe(rename('new-name.js'))
        .pipe(gulp.dest('./JS-test/js-build/'))
});

然后我们测试一下，现在我将b.js第16行修改成这个样子

object.output = function () {  xsdf

这样肯定是错误的，假设是不小心打入的或者复制粘贴的。然后我们用gulp来检测一下

这里表示的是期望赋值或函数调用, 而不是看到一个表达式。gulp自己认为这是我们写的表达式，但是这个提示也让我们追踪到里这个地方的错误。

gulp中可以编写插件，不知道那里是不是可以有着更多的扩展，让我们去自定义更多的检测机制。期待后面的学习。

5. gulp操作css、img

// 引入 gulp
var gulp = require('gulp'),                     //基础库
    minifycss = require('gulp-minify-css'),     //css压缩
    imagemin = require('gulp-imagemin'),        //图片压缩
    rename = require('gulp-rename'),            //重命名
    concat = require('gulp-concat');            //合并文件

// 样式处理
gulp.task('css', function () {
    gulp.src('./css/*.css')
        .pipe(concat('all.min.css'))
        .pipe(minifycss())
        .pipe(gulp.dest('./CSS-test/'));
});

gulp.task('image', function () {
    gulp.src('./images/*.*')
        .pipe(imagemin())
        .pipe(gulp.dest('./CSS-test/'));
});