Grunt(頁面靜態引入的文件地址的改變探究)-V2.0

時間 2019-12-14

標籤 grunt 頁面靜態引入文件地址改變探究 v2.0 欄目 Node.js 简体版

原文原文鏈接

相關插件的引用：css

grunt-usemin 對頁面的操做

grunt-contrib-cssmin 壓縮css

load-grunt-tasks 瘦身gruntfile

grunt-rev 給md5加密

實際的使用場景：壓縮css文件到指定目錄，而且更改頁面引用的外鏈（這裏以css爲例）。html

情景一：html頁面與要操做的css在同一目錄下，且也與操做後的css在同一目錄下。node

**這裏使用npm中的註釋方式來操做外鏈的，擴展性很很差。npm

Gruntfile.js內容以下： json

module.exports = function(grunt) { require('load-grunt-tasks')(grunt);//至關於加載了package.json文件中的全部依賴項，省去了寫一大堆
                                    //grunt.loadNpmTasks('grunt-usemin')
 grunt.initConfig({ usemin: { html: ['shop.html'] }, cssmin:{ target: {//target這是任務名，能夠隨意取，可是不要與cssmin衝突
 files: [{ expand: true,//佔位符（即*號）都要擴展成具體的文件
              cwd: './',//相對路徑
              src: ['*.css'],//相對路徑下的要壓縮的文件,可使用通配符
              dest: 'mycssmin',//要壓縮文件放入的目標路徑
              ext: '.min.css' //壓縮後的文件後綴
 }] } } }) grunt.registerTask('styleMin',['cssmin','usemin']); }

加密操做：svg

rev: { options: { algorithm: 'md5',//加密方式，默認md5
      length: 8//默認長度 8
 }, assets: { files: [{ src: [ 'img/**/*.{jpg,jpeg,gif,png}', 'fonts/**/*.{eot,svg,ttf,woff}' ] }] } }

html內容：grunt

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>shop</title>
<!-- build:css mycssmin/style.min.css -->
<link rel="stylesheet" href="style.css">
<!-- endbuild -->
</head>
<body>

<p>該頁面被監聽!</p>

</body>
</html>

操做後的頁面：學習

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>shop</title>

<link rel="stylesheet" href="style.min.css">

</head>
<body>

<p>該頁面被監聽!</p>

</body>
</html>

頁面中必須加入：測試

<!-- build:css mycssmin/style.min.css -->與<!-- endbuild -->
這樣壓縮完後再執行usemin的時候，頁面的連接纔會被替換掉！可是怎麼感受這樣很無腦呢？-_-
絕對還有別的的方法，繼續學習，再來修改這裏。

*** 繼續昨天的問題。2016-03-29 20:50:38ui

每次修改文件還要去頁面寫block的話，那是至關麻煩。今天在經理的點撥下看了usemin的裏面有正則匹配。

\node_modules\grunt-usemin\lib目錄下的fileprocessor.js。

這裏面是大段大段的正則匹配，匹配你指定的頁面上的js,css，png等文件。

原來我昨天加了一個

ext: '.min.css' //壓縮後的文件後綴
加了一個這個以後，頁面上正則就匹配不到.min.css結尾的link了。因此一直沒有匹配上！
可是控制檯顯示了，它去遍歷過你頁面，只是沒有匹配上而已。

今天把後綴去掉以後，徹底沒有問題了。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>shop</title>
<link href="71ca3416.style.css" rel="stylesheet">
</head>
<body>

<p>該頁面被監聽!</p>

</body>
</html>

固然若是你有時候以爲那裏面的正則缺乏你須要的，你也能夠本身往裏面添加一些你須要的正則用來匹配你的需求！

上面的是處理後的css與頁面在同一個目錄，沒有問題。

***************繼續不斷測試中.....2016-03-29 22:34:11

情景二：當這樣的目錄結構時：也就是html頁面與css文件不在同一個目錄下。且操做後的css也不與html頁面在同一目錄下。

css在這樣的路徑下：

lib>css>style.css

執行：grunt.registerTask('styleMin',['cssmin','rev','usemin']);

css文件仍是在原來的目錄下：

lib>css>71ca3416.style.css

最終的html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>shop</title>
<link href="./lib/css/71ca3416.style.css" rel="stylesheet">
</head>
<body>

<p>該頁面被監聽!</p>

</body>
</html

頁面中的連接也發生了變化！

問題：我想要達到這樣的目的！（如圖的目錄結構）

情景三：html頁面與源文件不在同一目錄下，也與操做後的css不在同一目錄下的狀況。

目錄結構：

頁面html的css路徑：

grunt操做前：<link href="src/css/style.css" rel="stylesheet">

grunt操做後：<link href="dist/css/8cf38899.style.css" rel="stylesheet">

src中的文件copy到dist,而且壓縮，加密。而後usemin index.html.但願index.html中的css路徑發生改變，指向dist下的css文件。

最終初步的探究我發現：

usemin只會改變文件名，而不會去修改與匹配文件路徑。

並且usemin在尋找的時候也是按照頁面上的路徑去尋找相應的css,js等文件。

可是真的是這樣麼？但願真正懂的博友不吝賜教，謝謝！！

*****************實際的項目情形應該是這樣：2016-03-30 16:33:58

情景四：html頁面與css都在相應的目錄下，grunt的時候copy至別的文件夾，進行相對引用。

看目錄結構：

src是咱們的源文件。dist是咱們要發佈的文件。

爲了保證源文件不出問題，咱們都會copy出一份文件到單獨的地方進行操做。

Gruntfile.js:

module.exports = function(grunt) { require('load-grunt-tasks')(grunt); grunt.initConfig({ copy:{ build: { files: [{ expand: true, cwd: 'src', src: '**', dest: 'dist', flatten: false, filter: 'isFile' }] } }, cssmin:{ target: { files: [{ expand: true, cwd: 'dist/css', src: ['*.css'], dest: 'dist/css' }] } }, rev:{ files:{ src:['dist/css/*.css'] } }, usemin:{ html:['dist/page/index.html'] } }) grunt.registerTask('demo',['copy','cssmin','rev','usemin']); }

咱們將src文件copy一份到新的文件夾dist,src下的目錄結構都不變。而後在對dist下面的文件進行壓縮，加密等操做。

操做前的頁面index.html:

<!DOCTYPE html>
<html>
<head>
    <title>grunt+seajs</title>

    <link href="../css/ni.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">

</head>
<body>

<p>grunt+seajs的運用實例</p>

</body>
</html>

操做後的頁面index.html:

<!DOCTYPE html>
<html>
<head>
    <title>grunt+seajs</title>

    <link href="../css/a3c2a710.ni.css" rel="stylesheet">
    <link href="../css/8a738899.style.css" rel="stylesheet">

</head>
<body>

<p>grunt+seajs的運用實例</p>

</body>
</html>