css打包到jsgulp,css打包到一個文件

本文目錄一覽：

• 1、nodejs：用ejs模板和gulp實現前端組件化
• 2、怎麼用gulp壓縮js和css文件
• 3、css載入會造成阻塞嗎？css載入會阻塞js運行嗎？
• 4、gulp壓縮合併css/js時，怎麼自動修改引用壓縮後的css/js的路徑
• 5、gulp有沒有插件可以把js，css文件的內容合併到html頁面中

nodejs：用ejs模板和gulp實現前端組件化

最近在用nodejs將公司商城的底層重寫。基於nodejs的強大，我從原本的只寫前端變成了寫全棧。

框架採用express,模板用ejs,前端用amazeui. 做完三個頁面後，設計突然說要改UI設計，我勒個去，鬱悶地一個個頁面重新調整。下班之後反思一下，覺得花了太多時間在重複勞動上，是時候涉獵一下前端工程化的知識了。

用百度在互聯網暢遊了一番，總結了一下前端工程化的幾個關鍵要素：編碼規範化，結構模塊化，流程自動化。本文所述的方法屬於模塊化，但只是簡單地把dom，css,js拆分，以便更好地管理，而並非像vue框架那樣的組件化，但這種方式可能更易於理解，可以作為過渡。

這是原來的目錄結構

其中public目錄里存放的是靜態資源，按照傳統的做法，css文件夾種存放less文件和css文件，img文件夾中存放圖片資源，js中存放各頁面（views目錄中對應的頁面）的js文件。

當頁面越來越多，會遇到一些重複的部分。像圖中的側邊菜單，頂部搜索框，底部菜單，在幾個頁面都有。如果每個頁面拷貝一份樣式，js，dom,當需求方要更改樣式或者增加功能的時候，徒增工作量。

在一篇文章的啟發下（ 前端開發工程化探討 ），我將目錄結構改成如下：

為了標準化，每個組件里的文件命名都相同。以側邊工具欄為例，dom.ejs是一個模板文件：

如果不熟悉ejs模板的語法，可以百度一下。另外，此模板還支持嵌套，並傳入參數。

例如，下面是一個列表容器的dom結構，配合js可以實現上拉載入功能，但列表項的樣式可能不一樣，你可以在使用時再根據傳入的templateName參數決定用哪個模板，非常靈活。

在使用模板時，這樣嵌入頁面。

注意，應使用%-include()%,而非%=include()%。%-%表示內容原樣輸出，不進行運算。而%=%會生成運算後的內容。

然後，再來考慮js和css文件應當怎麼處理。如果在頁面中逐個引入組件的js和css文件，維護起來會非常不方便。所以我考慮將某個頁面涉及到的組件，還有頁面本身的js和css打包成一個。這樣做有個缺點，每個頁面的js和css文件會有重複的內容。如果用seajs或requirejs等模塊載入，可以解決重複的問題，但也可能增加項目的複雜度。考慮到打包後的文件只有10K大小，還是暫時使用打包的方法。有興趣的朋友也可以將js模塊化並測試一下性能。

打包涉及到gulp的應用，有許多文章談論到，而我是通過開源項目學習的。

首先我需要寫一個page-config.json文件，告訴gulp我要打包哪些資源：

將文件放在模板目錄的根目錄下面，與src,dist同級。src存放原文件，dist存放生成後的文件。

再寫一個gulpfile.js,用於自動構建。

下面是gulp文件的寫法：

在使用時，要在命令行安裝gulp，切換到gulpfile.js所在的目錄，運行gulp watch，這樣，每次在css和js更改時，會自動重新打包。當然，為了不重複操作，你可以寫一個腳本文件。

怎麼用gulp壓縮js和css文件

/步驟

首先要確保pc裝nodeglobal環境項目文件都install gulp

npm install gulp -g (global環境)

npm install gulp –save-dev (項目環境)

項目install需要gulp插件般壓縮需要

npm install gulp-minify-css gulp-concat gulp-uglify gulp-rename del –save-dev

更插件鏈接找

項目根目錄新建gulpfile.jsrequire需要module

var gulp = require(‘gulp’),

minifycss = require(‘gulp-minify-css’),

concat = require(‘gulp-concat’),

uglify = require(‘gulp-uglify’),

rename = require(‘gulp-rename’),

del = require(‘del’);

壓縮css

gulp.task(‘minifycss’, function() {

return gulp.src(‘src/*.css’) //壓縮文件

.pipe(gulp.dest(‘minified/css’)) //輸文件夾

.pipe(minifycss()); //執行壓縮

});

壓縮js

gulp.task(‘minifyjs’, function() {

return gulp.src(‘src/*.js’)

.pipe(concat(‘main.js’)) //合併所jsmain.js

.pipe(gulp.dest(‘minified/js’)) //輸main.js文件夾

.pipe(rename({suffix: ‘.min’})) //rename壓縮文件名

.pipe(uglify()) //壓縮

.pipe(gulp.dest(‘minified/js’)); //輸

});

執行壓縮前先刪除文件夾內容

gulp.task(‘clean’, function(cb) {

del([‘minified/css’, ‘minified/js’], cb)

});

默認命令cmd輸入gulp執行命令

gulp.task(‘default’, [‘clean’], function() {

gulp.start(‘minifycss’, ‘minifyjs’);

});

要cmd執行gulp即

css載入會造成阻塞嗎？css載入會阻塞js運行嗎？

直接給出結論：

1、css並不會阻塞DOM樹的解析

2、css載入會阻塞DOM樹渲染

3、css載入會阻塞後面js語句的執行

為了避免過長的白屏時間，我們應該儘可能的提高css載入速度，以下有幾種優化方法:

1、使用CDN(因為CDN會根據你的網路狀況，替你挑選最近的一個具有緩存內容的節點為你提供資源，因此可以減少載入時間)

2、對css進行壓縮(可以用很多打包工具，比如webpack,gulp等，也可以通過開啟gzip壓縮)

3、合理的使用緩存(設置cache-control,expires,以及E-tag都是不錯的，不過要注意一個問題，就是文件更新後，你要避免緩存而帶來的影響。其中一個解決防範是在文件名字後面加一個版本號)

4、減少http請求數，將多個css文件合併，或者是乾脆直接寫成內聯樣式(內聯樣式的一個缺點就是不能緩存)

關於DOMContentLoaded：

對於瀏覽器來說，頁面載入主要有兩個事件，一個是DOMContentLoaded，另一個是onLoad。而onLoad沒什麼好說的，就是等待頁面的所有資源都載入完成才會觸發，這些資源包括css、js、圖片視頻等。

1、如果頁面中同時存在css和js，並且存在js在css後面，則DOMContentLoaded事件會在css載入完後才執行。

2、其他情況下，DOMContentLoaded都不會等待css載入，並且DOMContentLoaded事件也不會等待圖片、視頻等其他資源載入。

參考自：

gulp壓縮合併css/js時，怎麼自動修改引用壓縮後的css/js的路徑

css文件壓縮用gulp-minify，js多個文件合併好像是gulp-concat然後再將其壓縮用gulp-uglify

gulp有沒有插件可以把js，css文件的內容合併到html頁面中

不引用外部的靜態資源文件，而直接通過style或script寫入的css與js，一般叫做inline resources。用gulp inline作為關鍵字搜索，就可以找到gulp-inline-source和gulp-inline。