gulp使用

首先，我们都知道gulp是基于Node.js的构建工具，使用者只需要写好相关的命令，gulp就能够根据命令去自动化的构建。比如前端经常要做的图片压缩，代码压缩，css预处理等。用gulp我们只需写命令等待gulp执行就完成全部工作了，而我们只需要关注自己的业务开发就好了。

先说下使用流程

全局安装gulp

$ npm install --global gulp

2.作为项目的开发依赖

$ npm install --save-dev gulp

3.在项目根目录下创建一个名为gulpfile.js的文件，文件基本内容如下

var gulp=require('gulp');

gulp.task('default',function(){

//将你的默认的任务代码放在这

})

4.运行gulp,执行你在gulpfile.js里写的命令，如果只想要执行某个任务，执行(gulp taskname(任务的名字))

$ gulp

这里顺便记录下我在运行某次我成功安装以后报的一个错,这一般是因为版本的问题导致的

解决：升级natives

结果：

 

二：说下如何具体的运用gulp打包

举例说明前端常用的用gulp进行less编译

var gulp = require('gulp');
var rename = require("gulp-rename");
var less = require("gulp-less");
gulp.task('less', function(){
    gulp.src('resources/css/style.less')
        .pipe(less())
        .pipe(rename({
            basename: "style.min",
            extname: ".css"
          }))
        .pipe(gulp.dest('resources/css/'));
});

首先，根据需求我们这里需要对less进行编译，一般情况下为了区分原文件和打包文件，最好不要用同一个名字，所以还需要对编译过的文件重新命名，因此这里我们需要两个插件，也就是下面两行代码，对文件命名的插件和对less编译的插件

var rename = require("gulp-rename");

var less = require("gulp-less");

注意：在引入之前我们需要安装插件

gulp install gulp-rename
gulp install gulp-less

详细说下这段代码的原理

gulp.task('less',function(){})

这就是在gulp里指定一个任务的基本格式，less是任务的名字，function(){}指定任务的具体业务。

 gulp.src()说白了就是你要操作的文件的规格，也就是输入的文件流，我这里写的是要编译的less文件的路径（相对于gulpfile.js)

接下来是gulp.pipe()

也就是你要对gulp.src()返回的对象进行的操作，我们这里要进行less编译，所以gulp .pipe(less())进行编译，然后是重命名输出，也就是

gulp.pipe(rename({
            basename: "style.min",
            extname: ".css"
          }))

rename() 是重命名查件的方法，basename是文件名，extname是后缀，这里我们编译后的文件就是style.min.css

gulp.dest()就是指定输出文件的路径

 

说下我工作中常用的插件

gulp-concat 合并文件

gulp.src('./js/*.js')
    .pipe(concat('all.js'))        
    .pipe(gulp.dest('./dist'));
//合并js文件夹下所有的.js文件，输出文件名为all.js，在根目录下的dist文件夹下

 gulp-uglify 压缩js代码

var uglify = require("gulp-uglify");

gulp.src('./hello.js')
    .pipe(uglify())                 // 直接压缩hello.js
    .pipe(gulp.dest('./dist'))
    
 gulp.src('./hello.js')
    .pipe(uglify({
        mangle: true,               // 是否修改变量名，默认为 true
        compress: true,             // 是否完全压缩，默认为 true
        preserveComments: 'all'     // 保留所有注释
    }))
    .pipe(gulp.dest('./dist'))

gulp-csso 压缩优化css

var csso = require('gulp-csso');

gulp.src('./css/*.css')
    .pipe(csso())
    .pipe(gulp.dest('./dist/css'))

gulp-imagemin 压缩图片

var imagemin = require('gulp-imagemin');

gulp.src('./img/*.{jpg,png,gif,ico}')
    .pipe(imagemin())
    .pipe(gulp.dest('./dist/img'))

gulp-babel 将ES6代码编译成ES5

var babel = require('gulp-babel');

gulp.src('./js/index.js')
    .pipe(babel({
        presets: ['es2015']
    }))
    .pipe(gulp.dest('./dist'))

总的来说，gulp说的直白一点就是通过加载各种插件来执行实现开发者指定的各种任务，来简化前端的开发工作。是开发者只需要专注业务开发。