前端快速開發模版

之前一直在開發移動端的單頁面應用，而移動web對效能和效果要求是比較苛刻的，所以用的都是輕量級的框架體系。基本上是zepto加自己開發的單頁面框架，再加上若干簡單的庫。這樣前端要載入的檔案很小，修改起來也非常方便，同時這樣的輕量級的體系使用gulp進行自動化管理也是非常合適的。

自從開發react專案後，對它的工程化和開發模式也是開了眼界，標準的框架體系就是重量級的react+redux+webpack。開發大型專案和後台管理系統用react，vue確實是不錯的。但是開發一些小專案，比如前端h5之類的又有殺雞用牛刀的感覺。

於是借鑑webpack工程化思想動手寫了個前端快速開發模版，用於開發快速簡潔的專案，比如之前的單頁面應用。而這個專案模版就是類似前端開發的腳手架了，基本的思路就是自動化和前端編譯，主要達到以下目的：

使用less預編譯css，使用autoprefixer進行樣式相容

js**用babel編譯，因此可基於es6，es7編寫**

類庫檔案使用npm包，js檔案使用browserify組織和打包，不再使用sea，require之類的載入器

html**使用swig模版引擎進行組織和預編譯

靜態資源版本使用rev管理，當css或js檔案內容有變化，打包時自動更新版本

前端開發基礎樣式，框架的整合。

沒有使用重量級的webpack，而是使用輕量級的gulp和browserify

//複製公共庫目錄下的所有內容
gulp.task('copy',function());

首先將less檔案轉為css，用autoprefixer新增相容性字首，合併壓縮，放到dist目錄，最後用rev外掛程式生成版本資訊，這個後面用於替換更新鏈結用。

//編譯css，新增相容字尾，壓縮
gulp.task('css', function() )
])).pipe(cleancss())
// .pipe(rename())
// .pipe(gulp.dest('./dist/css'));
.pipe(rev())
.pipe(gulp.dest('./dist/css'))
.pipe(rev.manifest())
.pipe(gulp.dest('./rev/css'));
});

我這裡有兩個入口檔案，可以隨時將新入口檔案新增到scripts陣列中，這裡做的就是使用babel轉換**，然後將外部檔案，npm包打包進來，生成sourcemap，輸出到dist資料夾，最後一樣用rev外掛程式生成版本資訊。

scripts.map(name=>)

.transform(babelify,)

.bundle() //merge

.pipe(source(name+'.js'))

.pipe(buffer())

// .pipe(uglify())

.pipe(sourcemaps.init()) //external sourcemap file

.pipe(sourcemaps.write('./'))

.pipe(rev())

.pipe(gulp.dest('./dist/js/'))

.pipe(rev.manifest(name+'.json'))

.pipe(gulp.dest('./rev/js/'));

});});html編譯我使用的是模版引擎是swig，這裡用的是gulp-swig外掛程式，當然也可以用ejs或jade的引擎。但我個人比較習慣用swig，因為它更靈活，支援各種檔案格式，可以直接使用html檔案，也支援ejs不支援的layout等。gulp-swig外掛程式的使用也非常簡單。

//swig編譯輸出html
gulp.task('html', function() 
})).pipe(gulp.dest('./'))
});

之前編譯css和js的時候已經呼叫rev生成了記錄了版本資訊的json檔案，如果內容有變化它會生成新的md5檔名。這裡就是用rev-collector替換html檔案中除md5部分外相同檔名的鏈結，這樣就就實現了版本更新功能，用這個外掛程式可以更新css，js，等的版本。

//更新css和js版本，同時替換html中的鏈結標籤
gulp.task('rev', scripts.concat(["css","html"]),function () 
})).pipe( gulp.dest('./dist') );
});

html裡面替換後的鏈結格式如下

專案自動化配置完後，接著就是配置專案模版了，這裡分兩種型別的模版：1.移動端優先的單頁面；2.pc端優先的普通頁面。

swig標籤語法

我們知道載入頁面時再去載入外部檔案是需要耗費載入時間，而頁面直出可以大大提高載入速度，同時預先載入部分樣式也可以避免載入時的白屏問題。這也是我們這裡將公共部分的js和css以**塊的形式嵌入到html檔案中，達到頁面直出的效果。

當然了圖示樣式，好看的字型檔案，單頁面的css，基礎的樣式css都有，同時母版還挖出了幾個block給繼承的頁面進行重寫，比如block title，block css，block js，內容block content。css塊和js塊既可以寫外部鏈結也可以直接寫**。我們可以根據自己的需求進行修改和配置檔案，具體內容看如下**。

0% loading...

接著就是建立pc端優先的模版layout.html，這個和單頁面模版相似，主要區別就是基礎樣式，同時不用嵌入移動端的**，頁面模版請看如下**：

專案模板完成了，我以建立單頁面專案為例演示使用的步驟

npm install

@lightblue:hsl(198, 73%, 53%);
// base
html,body
body,p,h1,h2,h3,h4,h5,h6
ul,ol
// todo more ...

require('../lib/zepto.js');// zepto沒有使用commonjs規範，修改後使用require引入 
animate:,
preload:function(),
aftload:function()
}).other('/index',)
.when('/button',)
.when('/form',)
.when('/dialog',)
.init();
// todo: more ...

執行自動化命令，進行編譯，合併，壓縮，打包

npm run build

**請看

前端快速開發模版

模版矩陣快速冪

矩陣快速冪模版

快速冪模版例題

前端快速開發模版

模版 矩陣快速冪

矩陣快速冪模版

快速冪模版 例題

相關推薦

模版矩陣快速冪

快速冪模版例題