【gulp】工作中的实战

写这篇文章的目的是为了以后的项目中懒得再去配gulp，直接可以拿这篇博客中的来用，因为有时候配置还是挺烦人的。

gulp相关插件的介绍

用法比较简单，假设大家都会用gulp,下面主要介绍一下一些插件的用途

1、del 删除文件，用于清空文件

2、browser-sync 用于自动刷新浏览器，从此再也不用F5手动刷新了

3、gulp-htmlmin 用于压缩html

4、gulp-clean-css 压缩css

5、gulp-uglify 压缩js

6、gulp-replace 替换路径

7、gulp-base64 将小图背景图转为base64的形式，可以自己设置最大多少尺寸转为base64

8、gulp-imagemin 压缩图片大小，不过效果不明显，还需要自己再处理一下图片

其他想用的插件可以自己去找，基本可以项目的需要，不够就去加就行

项目实战

1、由于项目中静态资源需要替换成公司的cdn,而且公司中的项目已经升级为https，所以这里弄了一个配置文件

config.js:

var projeact = 'awardSong'; //项目名

var terminal ='mobile';        //具体哪个端（pc、mobile..）

var commit = 'E:/work';  //测试环境

module.exports = {
    //CDN,一共有四个，到时候记得补上
     cdn : ['xxx']
}

2、平时我是用sass来进行编码的，所以弄了一个sass目录，css里面的文件不用写。执行编译的时候会自动将sass编译到css文件中。

3、开发环境，执行gulp default 即可，然后在浏览器中选择你在编译的html，每次执行编译的时候，只要编辑器保存了代码，浏览器会做相应的改变。无需刷新。

4、如果要打包到生产环境，也就是发布到线上，可以执行 gulp release ,这样的话所有的静态文件就会打包到dist的目录下，而且所以的文件都是经过压缩的。当然，输出路径也是可以自己替换的

目录结构：

projecdName
+src
  -css
  -html
  -images
  -js
  -sass
  -config.js
  -gulpfile.js
  -package.json

package.json文件内容如下：

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.18.2",
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-base64": "^0.1.3",
    "gulp-clean-css": "^2.0.13",
    "gulp-htmlmin": "^3.0.0",
    "gulp-sass": "^2.3.2",
    "gulp-uglify": "~0.3.1",
    "gulp-imagemin": "^2.2.1",
    "gulp-replace": "^0.5.4"
  }
}

gulpfile.js内容如下

/*
* @gulp：自动化任务
*/
var gulp = require('gulp');
var rm = require('del');                   //删除文件
var browserSync = require('browser-sync');
var reload = browserSync.reload;          //自动刷新,从此不用F5
var htmlmin = require('gulp-htmlmin');   //压缩html
var miniCSS = require('gulp-clean-css'); //压缩css
var miniJS  = require('gulp-uglify');   //压缩js
var sass = require('gulp-sass');        //编译sass
var run_os_cmd = require('child_process').exec;
var replace = require('gulp-replace');
var cssBase64 = require('gulp-base64');  //将小图背景图转为base64的形式
var imagemin = require('gulp-imagemin');

/*清除产出目录*/
gulp.task('clear-dir', function() {
    rm.sync(['dist/**']);
    rm.sync(['staticPub/**']);
})

//引入配置文件
var config = require('./config.js');
var cdn=config.cdn[0];

/*
* html压缩
* 干掉http:和https:协议名
* 替换掉路径
*/
gulp.task('mini-html', function() {
    return gulp.src('src/html/**.html')
    .pipe(replace('http://', '//'))
    .pipe(replace('https://', '//'))
    .pipe(replace(/\.\.\/(images\/\S+\.(png|gif|jpg|webp))/g, function(all,str) {
          return (cdn+str);
    }))
    .pipe(replace(/\.\.\/(css\/\S+\.(css|less|scss))/g,function(all,str){
           return (cdn+str);
    }))
    .pipe(replace(/\.\.\/(js\/\S+\.(js))/g,function(all,str){
           return (cdn+str);
    }))
    .pipe(htmlmin({
          removeComments: true,       //清除HTML注释
          collapseWhitespace: true,  //压缩HTML
          minifyJS: true,            //压缩页面JS
          minifyCSS: true            //压缩页面CSS
    }))
    .pipe(gulp.dest('dist/html/'))
})

/*图片产出*/
gulp.task('images', function() {
    return gulp.src('src/images/*')
    // 压缩图片
    .pipe(imagemin({
        progressive: true
    }))
    .pipe(gulp.dest('dist/images/'))
})

/*sass开发*/
gulp.task('sass_dev', function() {
    return gulp.src('src/sass/**.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('src/css/'))
        .pipe(reload({stream:true}))
})

/*css压缩*/
gulp.task('mini-css', ['sass_dev'], function() {
    return gulp.src('src/css/**.css')
    .pipe(cssBase64({
        maxImageSize: 8*1024  //小于8k的图转为base64
    }))
    .pipe(replace(/\.\.\/(images\/\S+\.(png|gif|jpg|webp))/g, function(all,str) {
          return (cdn+str);
    }))
    .pipe(miniCSS({compatibility: 'ie6'}))
    .pipe(gulp.dest('dist/css/'))
})

/*
* js压缩
* 干掉http:和https:协议名
*/
gulp.task('mini-js', function() {
    return gulp.src('src/js/**')
        .pipe(replace('http://', '//'))
        .pipe(replace('https://', '//'))
        .pipe(miniJS())
        .pipe(gulp.dest('dist/js/'))
})

/*自动刷新*/
gulp.task('server', function() {
    browserSync({
        ui:false,
        server: {
            baseDir: 'src',
            directory: true
        },
        notify: false,
        ghostMode:false,
        port: 8080,
        open: "external"
    }, function(err, arg) {
        console.log('无需再按F5刷新啦！！');
    })
})

/*开发环境*/
gulp.task('default', [
    'sass_dev',
    'server'
], function() {
    gulp.watch('src/html/*.html', reload);
    gulp.watch('src/js/**',reload);
    gulp.watch('src/sass/*.scss',['sass_dev']);
})

/*生产环境*/
gulp.task('release', [
    'clear-dir',
    'mini-html',
    'mini-css',
    'mini-js',
    'images'
], function() {
    /*
    * 二次产出，可以做其他操作
    */

})

项目的实际操作我发布到github了，有兴趣的可以搞一搞：https://github.com/xianyulaodi/gulpUsage

备注：代码比较简单，有一定gulp基础的都可以看的懂。主要是为了以后方便，直接拿来用即可，无需再去配置啊什么鬼。