對91uu.net站資源打包，gulp獨立分文件夾打包

dazi.91uu.net 是如何打包資源文件呢。

基本的環境準備工作如下：本節以(window 7下操作)

1、NodeJs環境安裝與配置

2、gulp下載與使用

 

一、NodeJs環境安裝與配置

關於什麼是NodeJs就不詳細介紹，簡要說明，它就是用javascript 方式去操作系統資料的一個開發環境。是一個橋樑平臺。

大家可以去官網下載最新版本的，安裝後進行環境變量的配置。

下載》  NodeJs  選擇左邊綠的下載安裝就可以

關於環境變量的配置，百度搜索很多， 點擊這裏去看看吧

二、gulp安裝與使用

首先，gulp是基於nodejs 平臺開發出來的，進行對靜態資源的打包與發佈的前端開發工具之一。當然也有webpack等等一些打包工具。

由於是基於nodejs 所以，我們用npm 來進行 對gulp的安裝。（npm 是包管理器，現在一般安裝完nodejs就會自己帶上）。

npm 一般是從國外下載包，所以想快點下載的話，可以鏡像切換。如何切換，點擊這裏《npm鏡像切換》

當然還有直接使用，cnpm（這個是淘寶爲國內打造的一個鏡像），可以通過npm 去安裝cnpm 就可以了。

nodejs開發必不可少的就是package.json（它就是用來管理，通過npm 或cnpm 下載的包與發佈包的一些配置）。

所以，我們要建一個package.json包，並指明一些配置，關於它的每項配置說明大家可以自己找一下資料，很多的。

現在看一下簡要package.json如下：

{
  "name": "typing-src",
  "realname": "typing-ui",
  "version": "2.0.1",  
  "scripts": {
    "build": "gulp",
    "watch": "gulp watch"
  }, 
  "author": [
    "admin <[email protected]>"
  ],
  "homepage": "https://www.91uu.net",
  "devDependencies": {
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.0 ",
    "gulp-header": "^1.8.8",
    "gulp-if": "^2.0.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-rename": "^1.2.2",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-uglify": "^1.5.4",
    "gulp-zip": "^4.0.0"
  }, 
  "dependencies": {
    "gulp-html-replace": "^1.6.2",
    "gulp-minify-html": "^1.0.6",
    "gulp-processhtml": "^1.2.0",
    "gulp-util": "^3.0.8"
  } 
}

建好了之後，我們通過cmd 指定到package.json 這個目錄 ，在命令行工具執行cnpm install 就可以安裝相關的依懶包了。

那這個也是我們後面要寫gulpfile.js文件做準備，其中scripts這個選項是後面我們要執行打包的命令。

爲什麼一定要gulpfile.js文件名，因爲gulp命令自動會讀取這個默認文件。

接下來創建一個gulpfile.js文件，內容如下：

var pkg = require('./package.json');
//獲取參數
var argv = require('minimist')(process.argv.slice(2), {
  default: {
    ver: 'all' 
  }
})
,resourcesPatch = '你要打包的讀取的目錄'
,outPath = resourcesPatch+'dist/'
,outStaticPath = outPath+'目錄1/'
,outTplPath = outPath+'templates/'
,staticPath = resourcesPatch+'目錄1/'
//發行版本目錄
,releaseDir = './' + pkg.version
,release = releaseDir

//目標木
,destDir = function(ver){
  return ver ? release : function(){
    return argv.rc ? 'rc' : 'dist'
  }();
};

var fs = require('fs');
var path = require('path');
var merge = require('merge-stream');
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var minify = require('gulp-minify-css');
var minifyhtml = require('gulp-minify-html');
var htmlreplace = require('gulp-html-replace');
//var processhtml = require('gulp-processhtml');
var concat = require('gulp-concat');
var sourcemaps  = require('gulp-sourcemaps');
var rename = require('gulp-rename');
var header = require('gulp-header');
var del = require('del');
var gulpif = require('gulp-if');
var minimist = require('minimist');
var zip = require('gulp-zip');


//註釋
var note = [
  '/** <%= pkg.realname %>-v<%= pkg.version %> <%= pkg.license %> License By <%= pkg.homepage %> */\n <%= js %>'
  ,{pkg: pkg, js: ';'}
];
/*
* 讀取目錄文件並創建打包任務，遞歸讀取
*/
var creatTasks = function (ops) {
  var doDir=ops.doDir,type=ops.type;
  var files = fs.readdirSync(doDir),tasks=[],item,dir;
  for(var i=files.length-1;i>=0;i--){
    if(fs.statSync(path.join(doDir, files[i])).isDirectory()){
      tasks.concat(creatTasks({
        doDir:doDir+files[i]+'/',
        ver:ops.ver,
        uirPath:ops.uirPath,
        outDir:ops.outDir,
        type:ops.type
      }));
    }else{ 
      item=gulp.src(doDir+files[i]).pipe(type=="js"?uglify():minify({
        compatibility: 'ie7'
      }))
      //.pipe(header.apply(null, note))//這個會影響有@charset "utf-8"; 的樣式問題 
      .pipe(gulp.dest(ops.outDir+doDir.replace(ops.uirPath,'/')));
      tasks.push(item);
    };
  }
  return tasks;
};

var taskList = {   
  web_js:function(ver) {
    let uirPath = staticPath +'/web/js/';
    let dir = destDir(ver);
    let outDir = outStaticPath +'/'+ dir+'/web/js/';
    let tasks = creatTasks({
      doDir:uirPath,
      ver:ver,
      uirPath:uirPath,
      outDir:outDir,
      type:'js'
    });
    return merge(tasks);
  }
  ,web_css:function(ver) {
    let uirPath = staticPath +'/web/css/';
    let dir = destDir(ver);
    let outDir = outStaticPath + dir+'/web/css/';
    let tasks = creatTasks({
      doDir:uirPath,
      ver:ver,
      uirPath:uirPath,
      outDir:outDir,
      type:'css'
    });
    return merge(tasks);
  }
  ,common_js_modules:function(ver) {
    let uirPath = staticPath +'/common/js/modules/';
    let dir = destDir(ver);
    let outDir = outStaticPath +dir+'/common/js/modules/';
    let tasks = creatTasks({
      doDir:uirPath,
      ver:ver,
      uirPath:uirPath,
      outDir:outDir,
      type:'js'
    });
    return merge(tasks);
  }
    //有些資源不打包，但是要複製到對應目錄
  ,copy_commonJsLib:function(ver){
    let uirPath = staticPath +'/common/js/lib/**/*';
    let dir = destDir(ver);
    let outDir = outStaticPath+ dir+'/common/js/lib/';
    return gulp.src(uirPath).pipe(gulp.dest(outDir));
  } 
}
//添加任務
gulp.task('web_js', taskList.web_js);
gulp.task('web_css', taskList.web_css);
gulp.task('copy_webCssIcon', taskList.copy_webCssIcon);
gulp.task('copy_webImages', taskList.copy_webImages);

//清理
gulp.task('clear', function(cb) {
  return del(['./'+ (argv.rc ? 'rc' : 'dist') +'/*'], cb);
});
gulp.task('clearRelease', function(cb) {
  return del([outStaticPath+releaseDir,outTplPath+releaseDir], cb);
});
//這裏是監控文件變動打包
gulp.task('watch',function(){
  gulp.watch(staticPath+'/web/css/**/*.css',['web_css']);
  gulp.watch(staticPath+'/web/js/**/*.js',['web_js']);
  gulp.watch(staticPath+'/web/images/**/*.{png,jpg,gif}',['copy_webImages']);
});
//發行版 gulp
gulp.task('default', ['clearRelease'], function(){
  for(var key in taskList){
    taskList[key]('open');
  }
});

最後大家就可以執行一下npm run build 就可以了。