第一步:

//如何安装指定grunt的插件,安装后自动在当前cmd目录下新建node_modules文件夹,文件夹里面包含了下载完成的插件
npm install <module> --save-dev
npm install grunt --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-qunit --save-dev
npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-watch --save-dev

安装以后node_modules文件夹下的样子 //我就装了两个插件,没有全部安装哦

第二步:

//Gruntfile.js文件的内容,这个东西非常重要
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/*.js'],
dest: 'dist/<%= pkg.name %>.js'
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: {
'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
}
}
}
}); grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat'); //grunt.registerTask('test', ['jshint', 'qunit']);,你如果想要在定义任务就可以写在这边
grunt.registerTask('default', [ 'concat', 'uglify']);//这个是默认在当前目录执行grunt会执行的任务,和grunt.initConfig下的内容对应
};

第三步:

//package.JSON文件的内容,只要你按照第一步安装好了,这里的devDependencies会自动更新

最后:当前目录执行grunt

//===> done  \=_=///

//这两个东西一直忘记 ,再写一下
typeof NaN === "number"
typeof null === "object"

  

知道了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. 06-图2 Saving James Bond - Easy Version

    题目来源:http://pta.patest.cn/pta/test/18/exam/4/question/625 This time let us consider the situation in ...

  2. MySQL数据库学习笔记(十二)----开源工具DbUtils的使用(数据库的增删改查)

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...

  3. TestLink学习五:TestLink1.9.13和JIRA6.3.6的集成

    testlink和jira的集成,一般步骤: 第1步:System-Issue Tracker Management添加JIRA的db模式.第2步:测试项目管理,“Issue Tracker Inte ...

  4. Android 可拖拽的GridView效果实现, 长按可拖拽和item实时交换

    转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17718579),请尊重他人的辛勤劳动成果,谢谢! 在And ...

  5. 程序4-5 打开一个文件,然后unlink

    //http://blog.chinaunix.net/uid-24549279-id-71355.html /* ========================================== ...

  6. TIF、JPG图片手动添加地理坐标的方法(转载)

    题目:为TIF.JPG图片添加地理坐标/平面直角坐标. 图片来源:GOOGLE EARTH.(当然也可以是其他知道四角点坐标的图片) 截图工具:GEtscreen(此软件截图时可以自动生成图片四角点坐 ...

  7. codevs 3012 线段覆盖 4 & 3037 线段覆盖 5

    3037 线段覆盖 5  时间限制: 3 s  空间限制: 256000 KB  题目等级 : 钻石 Diamond 题解       题目描述 Description 数轴上有n条线段,线段的两端都 ...

  8. VC/Wince 实现仿Win8 Metro风格界面3——按钮移动交换、删除、添加快捷方式(附效果图)

    上一篇文章写了如何进行页面滑动切换,今天我讲一下如何实现两个按钮拖动交换位置,包括同一个页面按钮交换或者两个页面之间的按钮交换.另外就是如何拖动删除界面上的快捷方式.按钮交换和拖动删除,这两个功能基本 ...

  9. C语言 结构体中的成员域偏移量

    //C语言中结构体中的成员域偏移量 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> # ...

  10. C语言 复杂队列(链表队列)

    //复杂的队列二 --链表队列 #include<stdio.h> #include<stdlib.h> #define datatype int struct queueli ...