grunt live
{ "name": "grunt-live-test", "version": "0.1.0", "author": "liujin", "devDependencies": { "connect-livereload": "^0.5.2", "grunt": "^0.4.2", "grunt-contrib-connect": "^0.7.1", "grunt-contrib-cssmin": "^0.10.0", "grunt-contrib-watch": "^0.6.1", "grunt-newer": "^1.1.0" } }
module.exports = function(grunt) { // LiveReload的默认端口号,你也可以改成你想要的端口号 var lrPort = 35729; // 使用connect-livereload模块,生成一个与LiveReload脚本 // <script src="http://127.0.0.1:35729/livereload.js?snipver=1" type="text/javascript"></script> var lrSnippet = require('connect-livereload')({ port: lrPort }); // 使用 middleware(中间件),就必须关闭 LiveReload 的浏览器插件 var lrMiddleware = function(connect, options) { return [ // 把脚本,注入到静态文件中 lrSnippet, // 静态文件服务器的路径 connect.static(options.base), // 启用目录浏览(相当于IIS中的目录浏览) connect.directory(options.base) ]; }; // 项目配置(任务配置) grunt.initConfig({ // 读取我们的项目配置并存储到pkg属性中 pkg: grunt.file.readJSON('package.json'), // 通过connect任务,创建一个静态服务器 connect: { options: { // 服务器端口号 port: 8000, // 服务器地址(可以使用主机名localhost,也能使用IP) hostname: 'localhost', // 物理路径(默认为. 即根目录) 注:使用'.'或'..'为路径的时,可能会返回403 Forbidden. 此时将该值改为相对路径 如:/grunt/reloard。 base: '.' }, livereload: { options: { // 通过LiveReload脚本,让页面重新加载。 middleware: lrMiddleware } } }, // 通过watch任务,来监听文件是否有更改 watch: { client: { // 我们不需要配置额外的任务,watch任务已经内建LiveReload浏览器刷新的代码片段。 options: { livereload: lrPort }, // '**' 表示包含所有的子目录 // '*' 表示包含所有的文件 files: ['./*.html', 'css/*.css', 'js/*.js', 'images/**/*'] }, css:{ files: ['css/*.css'], tasks: ['newer:cssmin:mifify'] } }, cssmin: { options: { banner: '/*creat: <%= new Date() %> */', //文件头部输出信息 beautify: { //美化代码 ascii_only: true //中文ascii化,非常有用!防止中文乱码的神配置 }, compatibility : 'ie7', //设置兼容模式 noAdvanced : true //取消高级特性 }, mifify:{ files: [ { expand: true, // 启用下面的选项 cwd: 'css/', // 相对路径 src: ['*.css', '!*.min.css'], // 匹配相对于cwd目录下的所有css文件(排除.min.css文件) dest: 'dest/css', // 生成的压缩文件存放的路径 ext: '.min.css' // 生成的文件都使用.min.css替换原有扩展名 } ] } } }); // grunt.initConfig配置完毕 // 监控html js css grunt.loadNpmTasks('grunt-contrib-connect'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-newer'); grunt.registerTask('live', ['connect', 'watch']); };
grunt live的更多相关文章
- 初学seaJs模块化开发,利用grunt打包,减少http请求
原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...
- grunt配置任务
这个指南解释了如何使用 Gruntfile 来为你的项目配置task.如果你还不知道 Gruntfile 是什么,请先阅读 快速入门 指南并看看这个Gruntfile 实例. Grunt配置 Grun ...
- 快速开发Grunt插件----压缩js模板
前言 Grunt是一款前端构建工具,帮助我们自动化搭建前端工程.它可以实现自动对js.css.html文件的合并.压缩等一些列操作.Grunt有很多插件,每一款插件实现某个功能,你可以通过npm命名去 ...
- 是时候搁置Grunt,耍一耍gulp了
也算是用了半年Grunt,几个月前也写过一篇它的入门文章(点此查看),不得不说它是前端项目的一个得力助手.不过技术工具跟语言一样日新月异,总会有更好用的新的东西把旧的拍死在沙滩上(当然Grunt肯定没 ...
- 应用Grunt自动化地优化你的项目前端
在不久前我曾写了一篇 应用r.js来优化你的前端 的文章,为大家介绍了r.js这个实用工具,它可以很好地压缩.合并前端文件并打包整个项目.但是如果将r.js放到项目中,我们不得不顾及到一个问题——项目 ...
- Grunt(页面静态引入的文件地址的改变探究)-V2.0
相关插件的引用: grunt-usemin 对页面的操作 grunt-contrib-cssmin 压缩css load-grunt-tasks 瘦身gruntfile grunt-rev给md5 ...
- Grunt基本使用-V1.0
浅语:grunt中文网:http://www.gruntjs.net/ 第一步:Grunt 依赖 Node.js 所以在安装之前确保你安装了 Node.js.然后开始安装 Grunt. 实际上,安装的 ...
- nodejs、npm、grunt——名词解释
最近着手开发一个新项目,打算从工程化的角度整理一套自己的前端开发.发布体系. grunt这些工具,之前别人用我也用,并没有认真想过它们的前世今生,正好趁着这个机会,我来理一理目前业界比较流行这些工具的 ...
- grunt自定义任务——合并压缩css和js
npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...
- Grunt学习使用
原文地址:Grunt学习使用必看 grunt简介神马的不多说,到处一大堆. 我只说说我已经实现了的代码. 按照官方的教程 相信已经配置好了,接下来说 package.json 和 Gruntfile. ...
随机推荐
- unity3d Human skin real time rendering plus 真实模拟人皮实时渲染 plus篇
最近逃课做游戏,逃的有几门都要停考了,呵呵呵,百忙之中不忘超炒冷饭,感觉之前的人皮效果还是不够好,又改进了一些东西 首先上图 放大看细节 显而易见的比上次的效果要好很多,此次我把模型用3dmax进行了 ...
- HDOJ/HDU 2535 Vote(排序、)
Problem Description 美国大选是按各州的投票结果来确定最终的结果的,如果得到超过一半的州的支持就可以当选,而每个州的投票结果又是由该州选民投票产生的,如果某个州超过一半的选民支持希拉 ...
- int 和 long的区别
数据模型决定了C语言中基本数据类型与数据宽度的对应关系.我们常用的32位模型称为ILP32,而64位模型有三种:LP64.LLP64和ILP64.在64位模型中,指针一定是64位的,但是int和lon ...
- 三大跨平台网盘--ubuntu one
背景介绍 Ubuntu One是由Ubuntu背后的公司Canonical所推出的一项网络服务.该服务能够存储你的文件,并允许你在多台电脑上同步,还可以与好友分享这些文件. 准备工作 帐号--ubun ...
- cmd的copy命令合并多个文件
1.1个a.jpg文件:1个b.php文件(一句话木马)
- 如何仿写thinkphp的S方法?
代码如下: <?php $info=S("name","lizhaoyao"); $name=S("name"); var_dump( ...
- 移动开发框架,第【二】弹:Hammer.js 移动设备触摸手势js库
hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove. ...
- 如何制作iso文件
UltraISO 9.6.2.3059中文完美破解安装版 http://www.upantool.com/qidong/2011/UltraISO_v9.5.0.2800.html 软碟通v9.6.2 ...
- android 17 activity生命周期
手机指南针传感器处于手机头部. Activity生命周期: 启动. onCreat()方法:初始化布局对象,设置监听器. onstart()方法:注册监听器. onResume():activity已 ...
- [CodeForce]358D Dima and Hares
有N<3000只宠物要喂,每次只能喂一只,每喂一只宠物,宠物的满足度取决于: 1 紧靠的两个邻居都没喂,a[i] 2 邻居中有一个喂过了,b[i] 3 两个邻居都喂过了,c[i] 把所有宠物喂一 ...