【原】gulp工做中的實戰

寫這篇文章的目的是爲了之後的項目中懶得再去配gulp，直接能夠拿這篇博客中的來用，由於有時候配置仍是挺煩人的。

gulp相關插件的介紹

用法比較簡單，假設你們都會用gulp,下面主要介紹一下一些插件的用途

一、del 刪除文件，用於清空文件

二、browser-sync 用於自動刷新瀏覽器，今後不再用F5手動刷新了

三、gulp-htmlmin 用於壓縮html

四、gulp-clean-css 壓縮css

五、gulp-uglify 壓縮js

六、gulp-replace 替換路徑

七、gulp-base64 將小圖背景圖轉爲base64的形式，能夠本身設置最大多少尺寸轉爲base64

八、gulp-imagemin 壓縮圖片大小，不過效果不明顯，還須要本身再處理一下圖片

其餘想用的插件能夠本身去找，基本能夠項目的須要，不夠就去加就行

 

項目實戰

一、因爲項目中靜態資源須要替換成公司的cdn,並且公司中的項目已經升級爲https，因此這裏弄了一個配置文件

config.js:

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

var terminal ='mobile';        //具體哪一個端（pc、mobile..）

var commit = 'E:/work';  //測試環境

module.exports = {
    //CDN,一共有四個，到時候記得補上
     cdn : ['xxx']
}

 

二、平時我是用sass來進行編碼的，因此弄了一個sass目錄，css裏面的文件不用寫。執行編譯的時候會自動將sass編譯到css文件中。

三、開發環境，執行gulp default 便可，而後在瀏覽器中選擇你在編譯的html，每次執行編譯的時候，只要編輯器保存了代碼，瀏覽器會作相應的改變。無需刷新。

四、若是要打包到生產環境，也就是發佈到線上，能夠執行 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基礎的均可以看的懂。主要是爲了之後方便，直接拿來用便可，無需再去配置啊什麼鬼。