对gulp构建工具的一些常用功能的总结

本文只是对gulp构建工具的一些常用功能的总结。
1.实现文件（css，js，image）压缩
2.实现文件合并
3.版本控制
4.上传七牛cdn
引用插件如下：

var gulp = require('gulp'),    eslint = require('gulp-eslint'),    minify = require('gulp-minify-css'),//css压缩    concat = require('gulp-concat'),//文件合并    uglify = require('gulp-uglify'),//js压缩    rename = require('gulp-rename'),//文件重命名    imagemin = require('gulp-imagemin'),//压缩图片    clean = require('gulp-clean'),//清空文件夹    rev = require('gulp-rev'),//更改版本号    revCollector = require('gulp-rev-collector');//gulp-rev插件，用于html模板更改引用路径    -----------------------------------------    更新-------------------------------------    upload = require('gulp-qndn').upload,//七牛上传    cdn = require('gulp-cdn-replace'),//替换CDN链接

---

1.文件压缩

gulp文件压缩使用插件如下：

css文件压缩：gulp-minify-css

js文件压缩：gulp-uglify

image文件压缩：gulp-imagemin

配置如下：

//压缩cssgulp.task('minifyCss', function(){    return gulp.src('public/css/*.css')        .pipe(rename({suffix: '.min'}))        .pipe(minify())        .pipe(concat('main.css'))        .pipe(gulp.dest('dist/css'));});//压缩jsgulp.task('minifyJs', function(){    return gulp.src('public/js/*.js')        .pipe(uglify())        .pipe(gulp.dest('dist/js'));});//压缩图片gulp.task('minifyImg', function(){    return gulp.src('public/img/*')        .pipe(imagemin())        .pipe(gulp.dest('dist/image'));});

gulp.src()里面是需要压缩文件的目标地址
gulp.dest()里面是压缩文件存放地址
rename可以更改压缩文件的名字，根据需要进行设置

---

2.文件合并

gulp-concat实现文件合并，以合并css文件为例

gulp.task('minifyCss', function(){    return gulp.src('public/css/*.css')        .pipe(minify())        .pipe(concat('main.css'))        .pipe(gulp.dest('dist/css'));});

concat()里面是合并后文件名

3.版本

gulp.task('minifyCss', function(){    return gulp.src('public/css/*.css')        // .pipe(rename({suffix: '.min'}))        .pipe(minify())        .pipe(concat('main.css'))        .pipe(rev())        .pipe(gulp.dest('dist/app/css'))        .pipe(rev.manifest())        .pipe(gulp.dest('dist/css'));});

rev.manifest()会生成一个manifest.json文件

.pipe(rev())会自动在原先文件名上添加随机序号

---

更新———————————– - - - - - - -

4.自动上传cdn（七牛）

首先，你要有七牛账号，因为需要七牛的accesskey等信息

var qnOptions = {    accessKey: '**',    secretKey: '**',    bucket: '存放资源的容器名',    domin:'你的cdn链接',    delete: false（每次上传，如果你要删除同名文件就改为true）}

accessKey和secretKey都能在账号中找到

以上传压缩合并后js文件为例

gulp.task('minifyJs', function(){    return gulp.src('public/js/*.js')        .pipe(uglify())        .pipe(concat('main.js'))        .pipe(upload({qn: qnOptions}))        .pipe(gulp.dest('dest/js'));});

如此打包后，便能到你上传到的bucket中找到相关文件了