说明:

http://www.gruntjs.net/getting-started --grunt快速入门(创建package.json和Gruntfile.js
准备一份新的 Grunt 项目
一般需要在你的项目中添加两份文件:package.json 和 Gruntfile。

package.json: 此文件被npm用于存储项目的元数据,以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件,放置于devDependencies配置段内。

Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee,用来配置或定义任务(task)并加载Grunt插件的。 此文档中提到的 Gruntfile 其实说的是一个文件,文件名是 Gruntfile.js 或 Gruntfile.coffee。

http://blog.csdn.net/playboyanta123/article/details/43230831 安装
http://caibaojian.com/grunt.html --安装

http://caibaojian.com/grunt.html#t3

http://www.cnblogs.com/snandy/archive/2013/03/11/2949177.html --值得研究

package.json:

{
"name": "test_grunt",
"version": "0.1.0",
"devDependencies": {
"grunt": "^1.0.1",
"grunt-contrib-concat": "~0.1.1",
"grunt-contrib-jshint": "~0.1.1",
"grunt-contrib-uglify": "~0.1.2"
}
}

Gruntfile.js配置参数:

  // Project configuration.
module.exports = function(grunt) {
// 使用严格模式
'use strict'; // 这里定义我们需要的任务
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
//其他任务
concat: {
options: {
separator: ';',
stripBanners: true
},
dist: {
src: [
"js/EvenUtil.js",
"js/222.js",
],
dest: "assets/js/default.js"
}
},
uglify: {
options: {
},
dist: {
files: {
'assets/js/default.min.js': 'assets/js/default.js'
}
}
},
cssmin: {
options: {
keepSpecialComments: 0
},
compress: {
files: {
'assets/css/default.css': [
"dist/css/test.css",
"dist/css/common.css",
"dist/css/public.css",
"dist/css/index.css"
]
}
}
},
// 设置任务,删除文件夹
clean: {
dist: 'dist'
}, // 通过sass编译成css文件
sass: {
dist: {
files: [{
expand: true,
cwd: 'scss',
src: ['*.scss'],
dest: 'dist/css',
ext: '.css'
}]
}
},
// 检测改变,自动跑sass任务
watch: {
scripts: {
files: ['scss/*.scss','js/*.js','assets/css/*.css'],
tasks: ['sass','concat','uglify','cssmin'],
options: {
spawn: false
}
}
} }); grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
// 一定要引用着3个模块
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
// 把需要跑的任务注册到default这里每次运行grunt的时候先删除dist,然后重新编译,最后监测文件夹的情况。
grunt.registerTask('default', ['clean:dist', 'sass:dist', 'concat', 'uglify', 'cssmin', 'watch']);
};

grunt---grunt_test 测试用例的更多相关文章

  1. 用grunt搭建web前端开发环境

    1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs, ...

  2. 使用Grunt构建自动化开发环境

    1.准备工作 1)首页确保电脑上网,以及能够访问https://registry.npmjs.org/,因需从此网站中下载安装相应的插件; 2)电脑安装Node.js,Grunt及Grunt插件都是基 ...

  3. Grunt的使用

    在Node环境下.需要预先安装好Node. 1.安装grunt-cli [root@Luxh-01 ~]# npm install -g grunt-cli 2.创建一个目录test [root@Lu ...

  4. 【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...

  5. 前端见微知著工具篇:Grunt实现自动化

    转载说明 本篇文章为转载文章,来源为[前端福利]用grunt搭建自动化的web前端开发环境-完整教程,之所以转载,是因为本文写的太详细了,我很想自己来写,但是发现跳不出这篇文章的圈子,因为写的详尽,所 ...

  6. 前端自动化工具 -- grunt 使用简介

    grunt作为一个前端构建工具,有资源压缩,代码检查,文件合并等功能. 下面就简单了解grunt的使用. 一.环境配置 grunt是基于nodejs的,所以需要一个 nodejs 环境,未了解的可以  ...

  7. grunt///////////////////z

    1. 前言    替代grunt的其他工具,例如gulp.Gulp未来有可能替代grunt,现在市场占有率不如grunt. 本文讲解grunt入门,以及讲解grunt最常用的几个插件的使用.我录制的视 ...

  8. 如何使用grunt工具

    本文来源于同事的笔记,也是在网上查找的资料,记录分析的特别详细,对初学者来说简直不能再通俗易懂了,感谢原作者! 1.前言 选择Grunt原因 管理我们的文件依赖 随心所欲的批处理任务 整合常用的前端工 ...

  9. 转:【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

    原文地址:http://blog.csdn.net/wangfupeng1988/article/details/46418203 jQuery在使用grunt,bootstrap在使用grunt,百 ...

  10. 用grunt搭建自动化的web前端开发环境实战教程(详细步骤)

    用grunt搭建自动化的web前端开发环境实战教程(详细步骤) jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用!前端自动化, ...

随机推荐

  1. 关于在ARM MDK 中使用STM32F4xx 硬件浮点单元的话题

    http://mp.weixin.qq.com/s/CDyZ8v2kLiyuIBHf7iqEPA

  2. SSAS中雪花模型

    上面的[销售事实表]与[门店]维度.[集团]维度就组成了一个雪花模型. 1.可以把[集团]关联到[门店]的维度上去: 2.如果要把[集团]作为一个单独的维度,先在[维度]里把Dim_Group添加进来 ...

  3. JDK原子类操作

    JDK原子类操作及原理 在JDK5之后,JDK提供了对变量的原子类操作, java.util.concurrent.atomic里都是原子类 原子类的分类 原子更新基本类型 原子更新数组 原子更新抽象 ...

  4. Java运算符——通过示例学习Java编程(6)

      作者:CHAITANYA SINGH 来源:https://www.koofun.com/pro/kfpostsdetail?kfpostsid=17 运算符是表示动作的字符,例如+是表示加法的算 ...

  5. IE下的圆角

    元素{ position: relative;/*必须*/ z-index: 10;/*必须*/ border-radius: 8px; -moz-border-radius: 8px; -webki ...

  6. Azure 进阶攻略 | 关于Java 和事件中心的那不得不说的事

    物联网技术辣么火,虽然之前有说过不少,但今天,仍有一个憋在我心里已久,不得不说的话题:基于Azure 的物联网平台必不可少,你可能已经在使用,但也许并没有意识到的服务:Azure 事件中心. 啊?事件 ...

  7. LR中下载文件的脚本

    #include "web_api.h" Action(){ int iflen; //文件大小 long lfbody; //响应数据内容大小 web_url("xxx ...

  8. MySQL主从复制原理介绍

    1)在mysql主库上,将改变记录到二进制日志(binary log)中. 2)在mysql从库上,IO线程将mysql主库上二进制日志(binary log)复制到中继日志(replay log)中 ...

  9. sqlserver 视图用 case when

    视图用 case when 需要 用如下格式,[需要的列名]= case when...,而表里面的case 不用这样 [isNormal]=CASE WHENdbo.c_bdm_head.I_E_F ...

  10. SQL增删查改语句

    一.增:有4种方法 1.使用insert插入单行数据: 语法:insert [into] <表名> [列名] values <列值> insert into sheet1 va ...