上午給你們分享的我的認爲比較全,比較官方,比較清晰的grunt使用教程,被挪出首頁了,不過不要緊,畢竟不是原創,你們想看,我如今貼出地址:css
http://www.cnblogs.com/sybboy/p/4877055.htmlhtml
下面但是我本身的東西,算是這段時間搞前端架構的總結吧:前端
1.遇到的問題jquery
2.目標json
3.如何解決架構
4.結果分析dom
5.還沒有解決ide
問題1----腳本混亂,沒有層次和固定代碼位置模塊化
問題2----腳本和css請求較多,請求未壓縮,文件未壓縮合並grunt
問題3----代碼目錄混亂,引用不清晰
問題4----腳本和css沒有添加版本號管理
1.整理頁面的代碼,必要的代碼模塊化
2.文件合併壓縮,外部引用的腳本要加密混淆
3. 網站目錄下,全部腳本 樣式 圖片統一存放
4. 添加版本號
使用seajs 將代碼模塊化,用define關鍵字定義模塊,用require調用外部腳本類庫及插件,模塊內部使用json形式將文件中的代碼按業務以及功能分類梳理
使用說明:
1.頁面首先引用seajs庫
2.按照固定格式 ,封裝代碼模塊
1 define([「jquery」,‘../index-plugin.min’],function(require){ 2 //方括號中的爲依賴項 3 4 var $=require(‘jquery’); //require 調用依賴項 5 6 require(‘../index-plugin.min’)($); //插件調用方式 7 8 var MOD = { 方法A:function(參數){},方法B…..}; 9 10 return MOD; 11 12 });
3.頁面配置seajs以及引用模塊代碼
現全站配置統一放於config.js
具體配置說明:http://liuxiaofan.com/2013/12/11/1547.html
引用:
seajs.use([‘jquery’,‘business/index.min’],function($,I){ //1.這裏是方法內容 2.方括號中的爲引用的類庫以及模塊文件 3. 參數中分別對應相應的引用 } )
頁面的腳本和樣式處理統一使用的grunt來處理,使用很簡單:
安裝過程內容比較多,具體看下個人技術博客:
http://www.cnblogs.com/sybboy/p/4877055.html
注意使用grunt,我的感受配置很重要,命令就一個grunt,這是我用到的配置:
1 module.exports = function(grunt) { 2 3 // 配置 4 5 grunt.initConfig({ 6 7 pkg : grunt.file.readJSON('package.json'), 8 9 // uglify : { 10 11 // options : { 12 13 // banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' 14 15 // }, 16 17 // build : { 18 19 // src : 'src/js/index.js', 20 21 // dest : 'dest/js/index.min.js' 22 23 // } 24 25 // } 26 27 // concat : { 28 29 // domop : { 30 31 // src: ['src/index-plugin.min.js','wow.min.js'], 32 33 // dest: 'dest/index-plugin2.min.js' 34 35 // } 36 37 // } 38 39 // cssmin: { 40 41 // add_banner: { 42 43 // // options: { 44 45 // // banner: '/* index css file by peng 20151009*/' 46 47 // // }, 48 49 // files: { 50 51 // 'dest/css/index.min.css': ['src/css/**/*.css'] // 合併並壓縮 path/to 目錄下(包含子目錄)的全部css文件 52 53 // } 54 55 // } 56 57 // combine: { 58 59 // files: { 60 61 // 'path/to/output.css': ['path/to/input_one.css', 'path/to/input_two.css'] 62 63 // } 64 65 // }, 66 67 // minify: { 68 69 // expand: true, // 啓用下面的選項 70 71 // cwd: 'src/css/', // 指定待壓縮的文件路徑 72 73 // src: ['*.css', '!*.min.css'], // 匹配相對於cwd目錄下的全部css文件(排除.min.css文件) 74 75 // dest: 'dest/css/', // 生成的壓縮文件存放的路徑 76 77 // ext: '.min.css' // 生成的文件都使用.min.css替換原有擴展名,生成文件存放於dest指定的目錄中 78 79 // } 80 81 //} 82 83 // uncss: { 84 85 // dist: { 86 87 // // options: { 88 89 // // ignore: ['#added_at_runtime', '.created_by_jQuery'] 90 91 // // }, 92 93 // files: { 94 95 // 'src/css/index_base.css': ['src/html/index.html'] 96 97 // } 98 99 // } 100 101 // }, 102 103 imagemin: { 104 105 /* 壓縮圖片大小 */ 106 107 dist: { 108 109 options: { 110 111 optimizationLevel: 3 //定義 PNG 圖片優化水平 112 113 }, 114 115 files: [ 116 117 { 118 119 expand: true, 120 121 cwd: 'src/img/activity', 122 123 src: ['**/*.{png,jpg,gif}'], // 優化 img 目錄下全部 png/jpg/jpeg 圖片 124 125 dest: 'dest/img/activity' // 優化後的圖片保存位置,覆蓋舊圖片,而且不做提示 126 127 } 128 129 ] 130 131 } 132 133 } 134 135 }); 136 137 138 139 // 載入concat和uglify插件,分別對於合併和壓縮 140 141 //grunt.loadNpmTasks('grunt-contrib-concat'); 142 143 //grunt.loadNpmTasks('grunt-contrib-uglify'); 144 145 //grunt.loadNpmTasks('grunt-contrib-cssmin'); 146 147 //grunt.loadNpmTasks('grunt-uncss'); 148 149 grunt.loadNpmTasks('grunt-contrib-imagemin'); 150 151 // 註冊任務 152 153 grunt.registerTask('default', ['imagemin']); 154 155 }; 156 157
以前:
首頁樣式與腳本的請求
結合yslow,能夠看出首頁總共有74個請求,總共1882kb,其中腳本11個請求,180kb左右,加載腳本須要2.68s;樣式8個請求,佔324kb,加載樣式所需35ms,大部分請求在圖片
以後:
首頁樣式與腳本的請求
結合yslow,能夠看出優化後的首頁總共有63個請求,總共1631kb,其中腳本9個請求,150kb左右,加載腳本須要2.2s;樣式2個請求,佔200kb,加載樣式所需8ms,大部分請求在圖片
結論:頁面請求減小11個,請求總量減小250多kb,請求時間減小0.5s左右
很明顯經過上次優化,請求量以及時間仍是個問題,效果不太明顯,下面是使用page speed分析的結果:
問題一:
網站的請求沒有進行gzip壓縮,預計壓縮後請求尺寸至少小一半
問題二:
圖片過大,能夠適當壓縮
問題三:
頁面的HTML代碼壓縮