這幾天練習一下webpack ，glup的工具使用，發現webpack 配置起來並不是太順利，總是有一種抗拒的，但從vuejs 和react 需要這種配套的方案去解決打包和釋出版本問題。這也是需要挖一下坑，把這塊骨頭啃下來。
無意中找到了fis百度的前端構建工具。查看了一下文件，練習一下，發現可以滿足當前開發一個公眾號的小小功能。這樣子釋出版本就可以解決快取的問題。

查看了一下這個工具，有一個地方做得比較好一點，資源定位。fis採取的方案是採取了絕地定位方案，但它還有一個比較強大一點功能。資源位置可以隨意修改和調整，這一點比較有意思，配套還有一些釋出版本的功能，壓縮等等。但由於專案不大，採用這個功能也可以滿足到一些開發。下面記錄一下使用過程。

第一步：安裝

使用之前 先到官方網站下載對應的版本fis3.雖然看似這個專案已經無維護跡象。但當前版本已經滿足到開發使用了。

npm 進行全域性安裝。（前提是安裝好nodejs的環境）

npm install -g fis3

第二步：使用官方的demo

由於官方demo目錄結構有點鬆散，於是，修改了一下他的目錄結構。
新增css、js、images等常規目錄。

第三步：新增fis-conf.js

在開發目錄，新增一個對應的檔案fis-conf.js，這個配置檔案新增上目錄。fis指令碼會對這個配置檔案進行解析工作。

由於滿足自身的專案目錄，所以在釋出版本的時候，將所有的資源放置在static下。釋出會的目錄會根據指令碼調整。

fis.match('*.{js,css,png,jpg,gif}', {
  useHash: true,

});


//所有的css檔案
fis.match('**.css', {
    release : '/static$0',
    url: '/fis3/static$0' 
});


fis.match('/js/(*.js)',{

  release : '/static$0',
  url: '/fis3/static$0' 

});

//所有image目錄下的.png，.gif,jpg檔案
fis.match('/images/(*.{png,gif,jpg})', {

    release : '/static$0'
 
,
    url: '/fis3/static$0' 

});


//測試目錄 
fis.media('qa').match('*', {
  deploy: fis.plugin('http-push', {
    receiver: 'http://127.0.0.1/receiver.php',
    to: 'E:/weixin/php2/htdocs/fis3' // 注意這個是指的是測試機器的路徑，而非本地機器
  })
});


fis.match('*', {
  deploy: fis.plugin('local-deliver', {
    to: 'E:/weixin/php2/htdocs/fis3'
  })
})

在使用過程遇到一個小坑，to的位置，當初的時候，遇到一個疑惑，文件是採用linux 的路徑描述，沒有新增window系統，嘗試一下猜測。將釋出的目錄路徑指定到本地的機器xampp的伺服器的htdocs\fis3的目錄下，fis3是自定義的目錄。

'E:/weixin/php2/htdocs/fis3'

這裡還遇到一個小問題，就是資源重定位。release 釋出的是相對的目錄，需要新增url路徑後，資源訪問才能正常。fis提供了這個配置機制。 新增url的目錄。

    release : '/static$0',
    url: '/fis3/static$0' //伺服器資源的位置

例如，本地的window目錄是E:/weixin/php2/htdocs/fis3，如果遷移了其他目錄後，也可以重新調整指令碼進行釋出。

第四步：使用qa 和釋出功能

fis 提供了一個php指令碼程式碼可以將測試程式碼釋出測試目錄。這裡有安全性問題，所以那個指令碼猜測可以用於區域網使用和正式伺服器。由於他的機制是採用http傳送請求將資源遷移到對應的目錄。（提供的版本有php 和nodejs版本）

需要將指令碼放置在伺服器根目錄下。

<?php
// ！！！！ 注意 ！！！！
// 此程式碼存在很大的安全隱患，請不要部署到線上服務。
// 百度內部請使用：http://agroup.baidu.com/fis/md/article/196978
@error_reporting(E_ALL & ~E_NOTICE & ~E_WARNING);
function mkdirs($path, $mod = 0777) {
    if (is_dir($path)) {
        return chmod($path, $mod);
    } else {
        $old = umask(0);
        if(mkdir($path, $mod, true) && is_dir($path)){
            umask($old);
            return true;
        } else {
            umask($old);
        }
    }
    return false;
}
if($_POST['to']){
    $to = urldecode($_POST['to']);
    if(is_dir($to) || $_FILES["file"]["error"] > 0){
        header("Status: 500 Internal Server Error");
    } else {
        if(file_exists($to)){
            unlink($to);
        } else {
            $dir = dirname($to);
            if(!file_exists($dir)){
                mkdirs($dir);
            }
        }

        echo move_uploaded_file($_FILES["file"]["tmp_name"], $to) ? 0 : 1;
    }
} else {
    echo 'I\'m ready for that, you know.';
}

使用

fis3 release qa  //釋出到qa 測試目錄

fis3 release // 釋出到本地伺服器目錄

完成後，資源在釋出後就能被訪問到了。開啟谷歌瀏覽器開發模式F12，可以看到資源的目錄已經被修改名字了。

小結

由於程式碼和配置針對個人專案，所以這樣釋出，檔案的快取問題應該可以解決到。

fis 還有很多功能還沒體驗到，像壓縮那些，目前來講，可以滿足到自身當前的專案開發，這一點足夠了。

相對webpack 這種單頁開發，webpack使用複雜度會較高一點。js的開發，確實是需要配套這些工作環境才能開發，這也是js開發難處。東西和框架有點多容易被動接受。
隨著js釋出各種版本和工具誕生，前端學習還是一個大坑，相比後端而言，穩定性前端變化讓人跟得太累了。