相关插件的引用：

实际的使用场景：压缩css文件到指定目录，并且更改页面引用的外链（这里以css为例）。

情景一：html页面与要操作的css在同一目录下，且也与操作后的css在同一目录下。

**这里使用npm中的注释方式来操作外链的，扩展性很不好。

Gruntfile.js内容如下：

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']);

}

加密操作：

rev: {

    options: {

      algorithm: 'md5',//加密方式，默认md5

      length: 8//默认长度 8

    },

    assets: {

      files: [{

        src: [

          'img/**/*.{jpg,jpeg,gif,png}',

          'fonts/**/*.{eot,svg,ttf,woff}'

        ]

      }]

    }

  }

html内容：

<!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:38

每次修改文件还要去页面写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里面的东西，只想说太尼玛费劲了！全英文，还是怪自己没有看英文版本的习惯。

Grunt(页面静态引入的文件地址的改变探究)-V2.0的更多相关文章

  1. Spring MVC 学习总结（七）——FreeMarker模板引擎与动态页面静态化

    模板引擎可以让程序实现界面与数据分离,业务代码与逻辑代码的分离,这就提升了开发效率,良好的设计也使得代码复用变得更加容易.一般的模板引擎都包含一个模板解析器和一套标记语言,好的模板引擎有简洁的语法规则 ...

  2. [转]PHP实现页面静态化的超简单方法

    为什么要页面静态化? 1.动态文件执行过程:语法分析-编译-运行 2.静态文件,不需要编译,减少了服务器脚本运行的时间,降低了服务器的响应时间,直接运行,响应速度快:如果页面中一些内容不经常改动,动态 ...

  3. 谈谈iOS开发如何写个人中心这类页面--静态tableView页面的编写

    本文来自 网易云社区 . 一.本文讲的是什么问题? 在开发 iOS 应用时,基本都会遇到个人中心.设置.详情信息等页面,这里截取了某应用的详情编辑页面和个人中心页面,如下: 我们以页面结构的角度考虑这 ...

  4. PHP实现页面静态化的简单方法分享

    为什么要页面静态化? 1.动态文件执行过程:语法分析-编译-运行 2.静态文件,不需要编译,减少了服务器脚本运行的时间,降低了服务器的响应时间,直接运行,响应速度快:如果页面中一些内容不经常改动,动态 ...

  5. 页面静态化技术Freemarker技术的介绍及使用实例.

    一.FreeMarker简介 1.动态网页和静态网页差异 在进入主题之前我先介绍一下什么是动态网页,动态网页是指跟静态网页相对应的一种网页编程技术.静态网页,随着HTML代码的生成,页面的内容和显示效 ...

  6. php页面静态化技术；学习笔记

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. PHP 实现页面静态化

    PHP文件执行阶段:语法分析->编译->运行 静态html文件执行顺序:运行 动态程序: 连接数据库服务器或者缓存服务器->获取数据->填充到模板->呈现给用户 关于优化 ...

  8. 基于 ThinkPHP 3.2.3 的页面静态化功能的实现

    PHP 的页面静态化有多种实现方式,比如使用输出缓冲(output buffering),该种方式是把数据缓存在 PHP 的缓冲区(内存)中,下一次取数据时直接从缓冲区中读取数据,从而避免了脚本的编译 ...

  9. Asp.Net MVC页面静态化功能实现一：利用IHttpModule和ResultFilter

    由于公司现在所采用的是一套CMS内容管理系统的框架,所以最近项目中有一个需求提到要求实现页面静态化的功能.在网上查询了一些资料和文献,最后采用的是小尾鱼的池塘提供的 利用ResultFilter实现a ...

随机推荐

  1. 从直播编程到直播教育：LiveEdu.tv开启多元化的在线学习直播时代

    2015年9月,一个叫Livecoding.tv的网站在互联网上引起了编程界的注意.缘于Pingwest品玩的一位编辑在上网时无意中发现了这个网站,并写了一篇文章<一个比直播睡觉更奇怪的网站:直 ...

  2. PHP实现RTX发送消息提醒

    RTX是腾讯公司推出的企业级即时通信平台,大多数公司都在使用它,但是我们很多时候需要将自己系统或者产品的一些通知实时推送给RTX,这就需要用到RTX的服务端SDK,建议先去看看RTX的SDK开发文档( ...

  3. C++中的变长参数

    新参与的项目中,为了使用共享内存和自定义内存池,我们自己定义了MemNew函数,且在函数内部对于非pod类型自动执行构造函数.在需要的地方调用自定义的MemNew函数.这样就带来一个问题,使用stl的 ...

  4. JavaScript String对象

    本编主要介绍String 字符串对象. 目录 1. 介绍:阐述 String 对象的说明以及定义方式. 2. 实例属性:介绍 String 对象的实例属性: length. 3. 实例方法:介绍 St ...

  5. 关于VS2015 ASP.NET MVC添加控制器的时候报错

    调试环境:VS2015 数据库Mysql  WIN10 在调试过程中出现类似下两图的同学们,注意啦. 其实也是在学习的过程中遇到这个问题的,找了很多资料都没有正面的解决添加控制器的时候报错的问题,还是 ...

  6. 【踩坑速记】开源日历控件，顺便全面解析开源库打包发布到Bintray/Jcenter全过程（新），让开源更简单~

    一.写在前面 自使用android studio开始,就被它独特的依赖方式:compile 'com.android.support:appcompat-v7:25.0.1'所深深吸引,自从有了它,麻 ...

  7. Redis简单案例(二) 网站最近的访问用户

    我们有时会在网站中看到最后的访问用户.最近的活跃用户等等诸如此类的一些信息.本文就以最后的访问用户为例, 用Redis来实现这个小功能.在这之前,我们可以先简单了解一下在oracle.sqlserve ...

  8. .net core和angular2之前端篇—1

    2016-10-20更新 今天的这篇文章还是一篇"Hello World",只不过开发环境有所改变--Visual Studio Code+Angular2+Webapck,也算是 ...

  9. iOS网络4——Reachability检测网络状态

    一.整体介绍 前面已经介绍了网络访问的NSURLSession.NSURLConnection,还有网页加载有关的webview,基本满足通常的网络相关的开发. 其实在网络开发中还有比较常用的就是网络 ...

  10. photoshop:无法完成请求 因为暂存盘已满

    今天photoshop打开一个问题,提醒:无法完成请求因为暂存盘已满 不用担心这个问题很好解决可能是你做的图比较大并不需要清理C盘空间 选择:编辑→首选项→暂存盘 设置第一暂存盘为D盘或E盘 总之 第 ...