① Gulp 壓縮 CSS 和 JS,並添加 hash, 解決文件緩存問題
在進行項目打包時,壓縮CSS、JS以及HTML文件,並為文件添加哈希值,以解決伺服器文件緩存問題,這可以通過使用Gulp打包工具實現。以下是實現這一目標的步驟。
針對CSS文件的壓縮,可以使用Gulp插件`gulp-clean-css`。安裝命令為`npm install gulp-clean-css --save-dev`。
對於JS文件的壓縮,則推薦使用`gulp-terser`插件,安裝命令為`npm install gulp-terser --save-dev`。
HTML文件的壓縮可以通過`gulp-htmlmin`插件完成,安裝命令是`npm install gulp-htmlmin --save-dev`。
為了在CSS和JS文件名後綴生成哈希值,可以引入Gulp插件`gulp-rev`。安裝命令為`npm install gulp-rev --save-dev`。生成的`rev-mainifest.json`文件將存儲修改前後的文件映射關系,例如:`fileBeforeHash -> fileAfterHash`。
為了在HTML中將哈希文件名寫入,可以使用`gulp-rev-collector`插件,安裝命令為`npm install gulp-rev-collector --save-dev`。該插件會讀取所有的HTML文件,並將`rev-mainifest.json`中對應文件替換為添加哈希後的文件名。
在每次修改文件後,應先刪除舊版文件以避免內存浪費和文件混淆。這可以通過Gulp插件`gulp-clean`實現,安裝命令為`npm install gulp-clean --save-dev`。在每次打包文件前,應先執行刪除操作。
最後,創建Gulp任務,執行命令`gulp packCSSJS`,即可查看HTML文件中的CSS和JS引用已經更新為含有哈希值的文件名。
在使用`import ** from "plugin_name"`的ES6模塊語法時,需要在`package.json`文件中添加`"type": "mole"`,以避免出現錯誤"Cannot use import statement outside a mole"。
② 如何進行html調試和js腳本調試
工具/原料
chrome瀏覽器 Mozilla firefox 電腦
方法/步驟
1、以chrome為例,首先打開需要調試的頁面,按F12快捷鍵打開調試工具。