grunt 服务端, grunt-cli 客户端

1、grunt 插件安装:

package.json, 存放grunt所需插件

{
"name": "demo",
"version": "0.1.0",
"description": "demo",
"private": "true",
"author": "hzijone",
"license": "MIT",
"devDependencies": {
"btoa": "~1.1.2",
"glob": "~5.0.14",
"grunt": "~0.4.5",
"grunt-autoprefixer": "~3.0.3",
"grunt-contrib-clean": "~0.6.0",
"grunt-contrib-compress": "~0.13.0",
"grunt-contrib-concat": "~0.5.1",
"grunt-contrib-connect": "~0.10.1",
"grunt-contrib-copy": "~0.8.0",
"grunt-contrib-csslint": "~0.5.0",
"grunt-contrib-cssmin": "~0.12.3",
"grunt-contrib-htmlmin": "~0.4.0",
"grunt-contrib-jade": "~0.15.0",
"grunt-contrib-jshint": "~0.11.2",
"grunt-contrib-less": "~1.0.1",
"grunt-contrib-qunit": "~0.7.0",
"grunt-contrib-uglify": "~0.9.1",
"grunt-contrib-watch": "~0.6.1",
"grunt-csscomb": "~3.0.1",
"grunt-exec": "~0.4.6",
"grunt-html": "~4.0.3",
"grunt-jekyll": "~0.4.2",
"grunt-jscs": "~1.8.0",
"grunt-saucelabs": "~8.6.1",
"grunt-sed": "twbs/grunt-sed#v0.2.0",
"load-grunt-tasks": "~3.2.0",
"markdown-it": "^4.4.0",
"npm-shrinkwrap": "^200.4.0",
"time-grunt": "^1.2.1"
},
"dependencies": {
"express": "3.x"
}
}

执行命令:npm install , 会在当前目录生成一个文件夹:node_module,存放安装成功的插件

配置内容详述:

. `_"private":"true"=>不上传到github_`
. Dependenciesg与devDependencies的区别:
.. devDependencies:如果只需要下载使用某些模块,而不下载这些模块的测试和文档框架
.. 指示当前包所依赖的其他包 . { "dependencies" :
{ "foo" : "1.0.0 - 2.9999.9999"
, "bar" : ">=1.0.2 <2.1.2"
, "baz" : ">1.0.2 <=2.3.4"
, "boo" : "2.0.1"
, "qux" : "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0"
, "asd" : "http://asdf.com/asdf.tar.gz"
, "til" : "~1.2"
, "elf" : "~1.2.3"
, "two" : "2.x"
, "thr" : "3.3.x"
}
} 版本格式可以是下面任一种:
version 完全匹配
>version 大于这个版本
>=version大于或等于这个版本
<version
<=version
~version 非常接近这个版本
^version 与当前版本兼容
1.2.x X代表任意数字,因此1.2.1, 1.2.3等都可以
http://... Unix系统下使用的tarball的URL。
**** 任何版本都可以
""任何版本都可以
version1 - version2 等价于 >=version1 <=version2.
range1 || range2 满足任意一个即可
git... Git地址
user/repo WARNING: npm WARN package.json demo@0.1.0 No repository field. +
npm WARN package.json demo@0.1.0 No README data。 +
*出现上述警告,是因为没有加github及README的文件*

2、执行grunt

文件:Gruntfile.js

执行命令: grunt

Gruntfile.js配置

module.exports = function(grunt) {

    grunt.initConfig({
pkg: grunt.file.readJSON('package.json'), uglify:{ options:{}, // build 都可以 // build: {
// //源文件
// src: 'js/bootstrap.js',
// //目标文件
// dest: 'js/bootstrap.min.js'
// }, dist:{
files: [
{
expand: true,
cwd: 'js/',
src: ['**/*.js'],
dest: 'js/',
ext: '.min.js',
extDot: 'first'
},
]
} },
cssmin: { options: {
keepSpecialComments: 0
},
compress: {
files: {
'css/bootstrap.min.css': 'css/bootstrap.css'
}
}
}, watch: { // files: ['<%= uglify.dist.files %>'],
files: 'js/*',
tasks: ['uglify'],
options: {
// Start another live reload server on port 1337
livereload: true,
} } }); //加载Grunt插件
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
// 默认的grunt 任务
grunt.registerTask('default', ['uglify','watch']); };

grunt 使用的更多相关文章

  1. 初学seaJs模块化开发,利用grunt打包,减少http请求

    原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...

  2. grunt配置任务

    这个指南解释了如何使用 Gruntfile 来为你的项目配置task.如果你还不知道 Gruntfile 是什么,请先阅读 快速入门 指南并看看这个Gruntfile 实例. Grunt配置 Grun ...

  3. 快速开发Grunt插件----压缩js模板

    前言 Grunt是一款前端构建工具,帮助我们自动化搭建前端工程.它可以实现自动对js.css.html文件的合并.压缩等一些列操作.Grunt有很多插件,每一款插件实现某个功能,你可以通过npm命名去 ...

  4. 是时候搁置Grunt,耍一耍gulp了

    也算是用了半年Grunt,几个月前也写过一篇它的入门文章(点此查看),不得不说它是前端项目的一个得力助手.不过技术工具跟语言一样日新月异,总会有更好用的新的东西把旧的拍死在沙滩上(当然Grunt肯定没 ...

  5. 应用Grunt自动化地优化你的项目前端

    在不久前我曾写了一篇 应用r.js来优化你的前端 的文章,为大家介绍了r.js这个实用工具,它可以很好地压缩.合并前端文件并打包整个项目.但是如果将r.js放到项目中,我们不得不顾及到一个问题——项目 ...

  6. Grunt(页面静态引入的文件地址的改变探究)-V2.0

    相关插件的引用: grunt-usemin  对页面的操作 grunt-contrib-cssmin  压缩css load-grunt-tasks 瘦身gruntfile grunt-rev给md5 ...

  7. Grunt基本使用-V1.0

    浅语:grunt中文网:http://www.gruntjs.net/ 第一步:Grunt 依赖 Node.js 所以在安装之前确保你安装了 Node.js.然后开始安装 Grunt. 实际上,安装的 ...

  8. nodejs、npm、grunt——名词解释

    最近着手开发一个新项目,打算从工程化的角度整理一套自己的前端开发.发布体系. grunt这些工具,之前别人用我也用,并没有认真想过它们的前世今生,正好趁着这个机会,我来理一理目前业界比较流行这些工具的 ...

  9. grunt自定义任务——合并压缩css和js

    npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...

  10. Grunt学习使用

    原文地址:Grunt学习使用必看 grunt简介神马的不多说,到处一大堆. 我只说说我已经实现了的代码. 按照官方的教程 相信已经配置好了,接下来说 package.json 和 Gruntfile. ...

随机推荐

  1. 【Beta版本】冲刺-Day4

    队伍:606notconnected 会议时间:12月12日 目录 一.行与思 二.站立式会议图片 三.燃尽图 四.代码Check-in 一.行与思 张斯巍(433) 今日进展:协助队友完成界面的修改 ...

  2. hdu 1863 - 畅通工程(MST)

    畅通工程 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  3. iOS - CABasicAnimation

    代码实例: [1] - (void)pulseClick { //!> 宽和高等比例转换 CABasicAnimation * pulse = [CABasicAnimation animati ...

  4. 获取List集合中最大值的方法

    public static void main(String args[])      {        //Double[] num = { 45.1,45.2 };              Li ...

  5. css003 选择器:明确设置哪些样式

    css003 选择器:明确设置哪些样式 1.每个样式的两个部分:选择器和声明块 1.标签选择器:整体控制 2.类选择器:精确控制(.+字母.数字.连字符或下划线) Css允许的类名为.+字母.数字.连 ...

  6. 20145212 《Java程序设计》第3周学习总结

    20145212 <Java程序设计>第3周学习总结 教材学习内容总结 教材第四章知识点总结 面向对象和面向过程: 面向对象是相对面向过程而言的,面向过程强调的是功能行为,面向对象是将过程 ...

  7. Comparable接口

    java.util.Arrays类也可以对Object数组进行排序,但是要使用这种方法排序必须实现Comparable接口,此接口就是用于指定对象排序规则的. 设计一个学生类,成绩由高到低排序,成绩相 ...

  8. JavaWeb学习笔记——开发动态WEB资源(三)显示当前时间

    该工程的功能是实现在页面中显示当前的时间 以下的代码是HelloServlet.java中的代码 package helloapp2; import java.io.IOException; impo ...

  9. JSP 核心标签库

    1 JSTL标签库介绍 JSTL标签库的使用是为弥补html标签的不足,规范自定义标签的使用而诞生的.使用JSLT标签的目的就是不希望在jsp页面中出现java逻辑代码 2 JSTL标签库分类 核心标 ...

  10. Tomcat配置并启用HTTPS

    参考文献:http://www.cnblogs.com/xdp-gacl/p/3744053.html#blogTitle2 概述:用sun公司提供的keytool(位置为<JAVA_HOME& ...