初探grunt.js
package.js
{ "name": "ttd_v3", "version": "0.1.0", "author": "liujin", "devDependencies": { "connect-livereload": "^0.5.2", "grunt": "~0.4.2", "grunt-contrib-concat": "~0.3.0", "grunt-contrib-connect": "^0.7.1", "grunt-contrib-cssmin": "^0.11.0", "grunt-contrib-jshint": "~0.6.0", "grunt-contrib-sass": "~0.3.0", "grunt-contrib-uglify": "~0.3.2", "grunt-contrib-watch": "^0.6.1", "grunt-css": "~0.5.4", "grunt-sass": "0.6.1" } }
gruntfile.js
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: ['D:/working/TFS2010/UISolution/website/_prototype_/code_pub/cn/vacation_v2/ttd/v3/*.php','D:/working/TFS2010/UISolution/website/_webresource_/styles/vacation_v2/*.css','D:/working/TFS2010/UISolution/website/_pic_/ttdonline/*'] }, sass: { files: ['sass/*.{scss,sass}','sass/*.{scss,sass}'], tasks: ['sass:dist'] } }, //js合并任务 concat : { webqq : { files : { 'dist/js/test.js' : ['js/a.js','js/b.js'] } } }, //js压缩任务 uglify : { options: { banner: '/** \n * <%= pkg.name %> \n * author:<%= pkg.author %> \n * update:<%= new Date() %> \n**/\n' }, webqq : { files : { 'dist/js/test.min.js' : ['dist/js/test.js'] } } }, //css压缩任务 cssmin: { options: { banner: '/** \n * <%= pkg.name %> \n * author:<%= pkg.author %> \n * update:<%= new Date() %> \n**/' }, cssmini: { files: { 'D:/git_ttd/ResStatic/code/ResACTOnline/css/vacation_v2/book_v3.1_ttd.css': ['D:/working/TFS2010/UISolution/website/_webresource_/styles/vacation_v2/book_v3.1_ttd.css'] } } }, //sass编译 sass: { dist: { files: { 'dist/css/test.css': 'sass/test.scss' } } } }); // grunt.initConfig配置完毕 // 监控html js css grunt.loadNpmTasks('grunt-contrib-connect'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.registerTask('live', ['connect', 'watch']); //合并压缩js grunt.loadNpmTasks('grunt-contrib-concat'); //js合并 grunt.loadNpmTasks('grunt-contrib-uglify'); //js压缩 grunt.registerTask('jsmini', ['cssmin']); //压缩css grunt.loadNpmTasks('grunt-css'); grunt.registerTask('cssmini', ['cssmin']); //编译sass grunt.registerTask('sassmini', ['sass:dist', 'watch']); grunt.loadNpmTasks('grunt-sass'); grunt.loadNpmTasks('grunt-contrib-watch'); };
初探grunt.js的更多相关文章
- 初探原生js根据json数据动态创建table
初探原生js根据json数据动态创建table 小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...
- 分享Grunt.js配置: watch + liveReload 实时监测文件变化自动刷新浏览器
http://www.tuicool.com/articles/2eaQJn 用Grunt配置watch和liveReload组件,可以实时检测指定的文件变化并自动刷新浏览器.目前基本已经成为了我的必 ...
- Grunt JS构建环境搭建以及使用入门
Grunt JS构建环境搭建以及使用入门 1.应用场景 一种自动化任务处理工具,对于日常的需求(代码规则检查.代码合并)可以实现自动化执行,只需要保留package.json和Gruntfile.js ...
- Grunt.js 上手
Official Site gruntjs.org/docs/getting-started.html 或者看http://tgideas.qq.com/webplat/info/news_versi ...
- 使用grunt js进行js的链接和压缩
1,http://nodejs.org/download/ 安装nodejs 2,配置环境变量,将nodejs的安装目录放置在Path环境变量中 3,在cmd中 npm install -g grun ...
- 初探 Ext JS 6 (sencha touch/ext升级版)
Sencha Touch 现在已全面升级至Ext Js 6,那么我们如何使用他们呢? 首先去官网下载最新的sdk和帮助文档 sdk下载地址:https://www.sencha.com/product ...
- 初探flow.js
第一部分:前言 我们知道JS是弱类型语言,在声明变量时不论是什么类型的变量我们都用var即可,所以js是非常灵活的,但是同时问题就是弱类型语言有可能会出错,比如在调用函数时,且往往在运行起来时才可以检 ...
- 前端初学者——初探Modernizr.js Modernizr.js笔记
什么是Modernizr? Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库. 目前,通过检验浏览器对一系列测试的处理情况,Modernizr 可以检测18项 CSS3 ...
- 初探node.js
一.定义及优势 定义:Node.js是一个基于 Chrome V8 引擎 的 JavaScript 运行时,它以事件驱动为基础实现了非阻塞模型. 优势:由于Web场景下的大多数任务(静态资源读取.数据 ...
随机推荐
- iOS 多线程学习笔记 —— NSThread
本文复制.参考自文章:iOS多线程编程之NSThread的使用 ,主要为了加强个人对知识的理解和记忆,不做他用.原作者声明: 著作权声明:本文由http://blog.csdn.net/totogo ...
- Hdu 3966-Aragorn's Story LCT,动态树
题目:http://acm.hdu.edu.cn/showproblem.php?pid=3966 Aragorn's Story Time Limit: 10000/3000 MS (Java/Ot ...
- 免费开源的android项目分享
免费开源的android项目分享:http://yun.baidu.com/share/link?shareid=2945649048&uk=3910054188
- SRM 410(1-250pt, 1-500pt)
DIV1 250pt 题意:对于图G,有一些点和边,点中有一些点称为特殊点.问在所有特殊点最终不能处于同一个联通块的条件下,最多能给在图G中添加多少条边. 解法:首先,对于图G,处理出它有哪些联通块, ...
- django运行django-admin.py无法创建网站
安装django的步骤: 1.安装python,选择默认安装在c盘即可.设置环境变量path,值添加python的安装路径. 2.下载ez_setup.py,下载地址:http://peak.tele ...
- Kafka中错误:Unrecognized VM option ‘UseCompressedOops’ Error: Clould not create the Java Vritual Machine. Error: A fatal exception has occurres . Program will exit.
错误的描述: 在kafka安装目录下,执行 $ bin/zookeeper-server-start.sh config/zookeeper.properties & Unrecognized ...
- a^b-b^a - SGU 112(高精度快速幂)
分析:直接上吧,建议不要使用模板,否则没啥意义了. 代码如下: ==================================================================== ...
- ASP中Utf-8与Gb2312编码转换乱码问题的解决方法 页面编码声明
ASP程序在同一个站点中,如果有UTF-8编码的程序,又有GB2312编码的程序时,在浏览UTF-8编码的页面后,再浏览当前网站GB2312的页面,GB2312编码的页面就会出现乱码 出现这样的问题是 ...
- mysql 统计 每天累计用户数
需求: 查出 一段时间每天的累计用户, 数据库这么设计的, 只有一张用户表, 每个用户注册的时间, 每一天的数据是之前的天数累计 select count(id) from r_user where ...
- 【解决方法】VS 丢失模板
今天要用VS2008做一个报表,可是在添加新建项的时候却没有报表(rdlc)模板. 解决方法: 1 拷贝文件 1.1 32位windows 将 C:\Program Files\Microsoft V ...