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>

文件路径已经发生改变，没有问题！

上面的问题还须要继续深挖，仍是有不少不懂，可是先结束这一阶段的探索。后面的学习，另开一篇。

吐槽（+_+）：

这几天捣鼓grunt搜索了N次，几乎没有搜索到有用的信息。

并且绝大多数雷同！或者含糊其辞，先后矛盾！

因而只有本身看npm里面的东西，只想说太尼玛费劲了！全英文，仍是怪本身没有看英文版本的习惯。