前端构建工具：gulp的配置与使用

安装gulp

因为gulp是基于node的管理工具，所以要先安装nodejs
安装nodejs
nodejs下载地址：中文站：http://nodejs.cn/ 英文站：https://nodejs.org/en/
下载后直接运行.msi文件
安装完成后，打开命令行（win+R）键入node -查看node版本

全局安装gulp

npm install -g gulp

在项目目录下安装gulp，若要在安装的时候把gulp写进项目package.json文件的依赖中，则可以加上–save-dev：
（项目目录下安装gulp打开命令行方式：shift+鼠标右键–>选择在此处打开命令行）

npm install gulp --save-dev

使用gulp -v查看是否成功安装（图左：全局查看gulp是否成功安装，图右：项目目录查看gulp是否成功安装）

使用gulp
创建gulpfile.js文件

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

创建package.json文件

npm init

运行gulp任务

在项目下打开命令行键入gulp , 执行任务.如下图

 

gulpAPI

gulp.src()

用来读取文件

gulp.src(globs[, options])

gulp.dest()

用来写文件

gulp.dest(path[,options])

gulp.task()

用来定义任务

gulp.task(name[, deps], fn)

gulp.watch()

用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等。例如

gulp.watch(glob[, opts], tasks)

 gulp常用插件安装命令

重命名文件

npm install --save-dev gulp-rename

css压缩

npm install --save-dev gulp-minify-css

js文件压缩

npm install --save-dev gulp-uglify

文件合并

npm install --save-dev gulp-concat

编译less

npm install --save-dev gulp-less

编译sass

npm install --save-dev gulp-sass

图片压缩

npm install --save-dev gulp-imagemin

include

npm install gulp-file-include

使用gulp插件

项目目录结构

示例路径配置

option = {//编译后存放文件的目录
        buildpath :'dist'
    }
coding={//开发目录
        buildpath :'src'
    }

 css文件压缩

安装：npm install –save-dev gulp-minify-css

var gulp = require( 'gulp'),
rename = require('gulp-rename')//重命名
minifycss = require('gulp-minify-css');

gulp.task('minifycss', function() {
    return gulp.src('src/css/!*.css')      //压缩的文件
        .pipe(rename({suffix: '.min'})) //重命名文件
        .pipe(gulp.dest('dist/css'))   //输出文件夹
        .pipe(minifycss());   //执行压缩
});

编译less

安装：npm install –save-dev gulp-less

var gulp = require('gulp'),
less = require('gulp-less');//编译less
gulp.task('less',function(){
    return gulp.src(coding.buildpath +'/less/*.less') //less文件路径
        .pipe(less())
        .pipe(gulp.dest(option.buildpath + '/css/'))//输出文件夹
})

编译sass

安装：npm install –save-dev gulp-sass

var gulp = require('gulp'),
sass = require(('gulp-sass');
gulp.task('sass',function(){
    return gulp.src(coding.buildpath +'/sass/*.scss')//sass文件路径
        .pipe(sass())
        .pipe(gulp.dest(option.buildpath +'/css/'))//输出文件夹
})

js文件压缩

安装：npm install –save-dev gulp-jshint

var gulp = require('gulp'),
uglify = require('gulp-rename'), //重命名
uglify = require('gulp-uglify');

gulp.task('minifyjs', function () {
    gulp.src(coding.buildpath + '/js/*.js')//文件压缩前的路径
        .pipe(uglify())  //压缩
        .pipe(rename({suffix: '.min'}))//会将*.js重命名为*.min.js
        .pipe(gulp.dest(option.buildpath + '/js/'));//文件压缩后的存放路径
});

图片压缩

安装：npm install gulp-imagemin imagemin-pngquant –save-dev

var gulp = require('gulp'),
uglify = require("gulp-uglify"), //重命名
imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant');

gulp.task('imagemin',function(){
    return gulp.src(coding.buildpath+ '/image/*')
       .pipe(imagemin({
            progressive:true,//无损压缩jpg图片
            svgoPlugins: [{removeViewBox: false}] // 不移除svg的viewbox属性
            use:[pngquant()] //使用pngquant来压缩png图片
        }))
        .pipe(imagemin())
        .pipe(gulp.dest(option.buildpath+'/image/'))
})

合并文件

安装：npm install gulp-concat –save-dev

var gulp = require('gulp'),
concat = require('gulp-concat');
gulp.task('concat',function(){
    return gulp.src(coding.buildpath +'/css/*.css')
        .pipe(concat('all.min.css'))
        .pipe(gulp.dest(option.buildpath + '/css/'))
})

清理文件

安装：npm install del –save-dev

var gulp = require('gulp'),
del = require('del');
gulp.task('clean',function(cb){
    return   del([option.buildpath],cb);
})

监听文件(无需另外安装)

gulp.task('watchImgs',function(){
    gulp.watch([coding.buildpath + '/image/**'],['imagemin']);
})
gulp.task('watchJs',function(){
    gulp.watch([coding.buildpath + '/js/**'],['minifyjs'])
})

include

安装：npm install gulp-file-include

gulp.task('include',function(){
    return gulp.src(coding.buildpath + '/page/*.html')
        .pipe(include({
            prefix: '@@',
            basepath: '@file'
        }))
        .pipe(gulp.dest(option.buildpath + '/page/'))
})

编译前

编译后

 执行任务

gulp.task('watch',['watchJs'])
gulp.task('default',[('clean'], function () {
    gulp.start('minifyjs','less','concat','sass','imagemin','include');
});

启动watch

gulp watch(项目目录下,在命令行中输入)

执行task任务

gulp(项目目录下,在命令行中输入)

执行单个任务 ： gupl task名称（例如 gulp include）