grunt的安装

npm intall -g grunt-cli

新建文件夹grunt,在本地文件中添加package.json和Gruntfile.js文件,其中package.json文件的配置如下

//package.json
{
"name": "grunt",
"version": "0.1.0",
"description": "demo",
"license": "MIT",
"devDependencies": {
}
}

本地安装 npm install grunt-cli --save-dev

//package.json
{
"name": "grunt",
"version": "0.1.0",
"description": "demo",
"license": "MIT",
"devDependencies": { "grunt": "^1.0.1"}}

安装grunt插件

grunt-contrib-concat合并两个文件

grunt-contrib-uglify文件压缩插件

grunt-contrib-jshint js代码错误检测

grunt-contrib-watch 监控

//package.json 安装插件后
{
"name": "grunt",
"version": "0.1.0",
"description": "demo",
"license": "MIT",
"devDependencies": {
"grunt": "^1.0.1",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-jshint": "^1.1.0",
"grunt-contrib-uglify": "^2.0.0"
}
}

Gruntfile.js的配置

module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
//grunt.file.readJSON('package.json') 将存储在package.json文件中的JSON元数据引入到grunt config中。 由于<% %>模板字符串可以引用任意的配置属性,因此可以通过这种方式来指定诸如文件路径和文件列表类型的配置数据,从而减少一些重复的工作
//如下表示的是在压缩的代码前添加表头以项目的name 年月日构成
options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' },
build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' }
}
});
// 加载包含 "uglify" 任务的插件。
grunt.loadNpmTasks('grunt-contrib-uglify');
// 默认被执行的任务列表。
grunt.registerTask('default', ['uglify']); };

执行以后如下图

压缩的文件的表头为
/*! grunt 2017-01-02 */

jshint

新建文件为 .jshintrc 其内容根据要检查的js决定,具体的js的检验可以在深入学习这里只是举了几个例子

{
//curly 表示所有的代码块必须使用大括号
“curly”: true,
eqeqeq 表示判断相等时,必须使用 ===
“eqeqeq”: true,
immed 表示立即执行函数必须用括号包起来 (function () { } ());
“immed”: true,
noarg 表示禁止使用 arguments.caller和arguments.callee
“noarg”: true,
noempty 表示禁止出现空的代码块 { }
“noempty”: true,
//quotmark 是引号的使用规则,有以下四个选项
//false : 不检查
//true : 检查一致性(要么都是单引号,要么都是双引号)
//single : 必须都是单引号
//double : 必须都是双引号
“quotmark”: “single”,
//undef 表示所有的局部变量都必须先声明再使用
“undef”: true,
//unused 表示禁止变量已经声明,但却不使用
“unused”: true,
//node 表明你的项目是NodeJS项目,require等node特有的全局函数将通过检查
“node”: true
}
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/bbb.js',
dest: 'build/<%= pkg.name %>-<%=pkg.version %>.min.js'
}
},
jshint: {
files: ['Gruntfile.js', 'src/bbb.js'],
options: {
jshintrc:'.jshintrc'
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('default', ['jshint', 'uglify']);
};

concat

/**
* Created by lenovo on 2017/1/2.
*/
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/bbb.js',
dest: 'build/<%= pkg.name %>-<%=pkg.version %>.min.js'
}
},
jshint: {
files: ['Gruntfile.js', 'src/bbb.js'],
options: {
jshintrc:'.jshintrc'
}
},
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/*.js'],
dest: 'dist/<%= pkg.name %>.js'
}
},
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['jshint', 'uglify','concat']);
};

grunt安装和使用教程的更多相关文章

  1. Grunt安装配置教程:前端自动化工作流

    Grunt这货是啥? Grunt 是一个基于任务的 JavaScript 项目命令行构建工具. 最近很火的前端自动化小工具,基于任务的命令行构建工具 http://gruntjs.com Grunt能 ...

  2. webpack安装配置使用教程详解

    webpack安装配置使用教程详解 www.111cn.net 更新:2015-09-01 编辑:swteen 来源:转载 本文章来为各位详细的介绍一下关于webpack安装配置使用教程吧,这篇文章对 ...

  3. javascript grunt安装和使用

    grunt是javascript世界的构建工具. 为何要用构建工具? 一句话:自动化.对于需要反复重复的任务,例如压缩(minification).编译.单元测试.linting等.自动化工具可以减轻 ...

  4. Grunt实践之简易教程

    以前自己太low了,都没用过高大上的前端自动化打包工具,开发方式也是偏传统的.加入到新的团队后得拼命赶上啊,前端技术更迭太快,各种技术层出不穷,智商都快不够用了.看人家都用的牛逼哄哄的技术,自己还守着 ...

  5. CentOS7下自定义目录安装mono+jexus教程

    一.阅读前须知: 1.本文属于安装完Centos7之后的步骤 2.如果还不了解mono,请点击mono 3.本篇主要内容是使用自定义目录安装mono+jexus教程,使用默认目录请查看使用默认目录安装 ...

  6. 【转】真正从零开始,TensorFlow详细安装入门图文教程!(帮你完成那个最难的从0到1)

    AI这个概念好像突然就火起来了,年初大比分战胜李世石的AlphaGo成功的吸引了大量的关注,但其实看看你的手机上的语音助手,相机上的人脸识别,今日头条上帮你自动筛选出来的新闻,还有各大音乐软件的歌曲& ...

  7. CentOS7下默认目录安装mono+jexus教程

    一.阅读前须知: 1.本文属于安装完Centos7之后的步骤 2.如果还不了解mono,请点击mono 3.本篇主要内容是使用默认目录安装mono+jexus教程,使用自定义目录请查看使用自定义目录安 ...

  8. << CocoaPods安装和使用教程 >>github code4app以及cocoachina 苹果官方文档

    developer.apple.com 英文搜索各个技术的官方介绍文档, 前提是英文过关 cocoachina ios最新新闻, 信息 code4app上有许多组件 http://www.code4a ...

  9. grunt安装

    随着node的流行,各种后台的技术应用到前端,依赖注入.自动化测试.构建等等. 本篇就介绍下如何使用Grunt进行构建. grunt安装 由于grunt依赖于nodejs,因此需要先安装nodejs. ...

随机推荐

  1. javax.crypto.BadPaddingException: Given final block not properly padded 解决方法

    下面的 Des 加密解密代码,在加密时正常,但是在解密是抛出错误: javax.crypto.BadPaddingException: Given final block not properly p ...

  2. Linux 服务器模型小结

    当我们用socket进行编程的时候,细节上都是选择一个AF_LOCAL,AF_INET再根据相应的类型填充地址,其实根据通信需求,有几种简单的服务模型可供选用,掌握了这些框架再结合socket高度的抽 ...

  3. 使用 expect 命令执行自动分发系统

    一.命令 except 实例详解 1. 介绍 expect 使用场景 expect可以让我们实现自动登录远程机器,并且可以实现自动远程执行命令.当然若是使用不带密码的密钥验证同样可以实现自动登录和自动 ...

  4. shell脚本中生成延时

    #!/bin/bash echo -n count: tput sc count=; while true; do ]; then let count++; ; tput rc tput ed ech ...

  5. Linux第一天 ssh登录和软件安装详解

    Linux学习第一天 操作环境: Ubuntu 16.04 Win10系统,使用putty_V0.63 本身学习Linux就是想在服务器上使用的.实际情况,可能我很难直接到坐在服务器前,使用界面操作系 ...

  6. LNMP环境magento常见错误

    一.安装报404错误 git clone 下最新代码,跳转到index/install 安装时出现404错误 需要把伪静态规则加到nginx配置文件中: # # The default server ...

  7. 《InsideUE4》UObject(一)开篇

    UE生UObject,UObject生万物 引言 在上个GamePlay专题,谈到UE创建游戏世界的时候(GamePlay架构(一)Actor和Component),简单的介绍了一下UObject的功 ...

  8. java设计模式之中介者模式

    中介者模式 用一个中介对象来封装一系列的对象交互.中介者使各个对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互. 中介者模式UML图 中介者模式代码 package com ...

  9. HTTP状态码302、303和307的故事

        今日读书,无法理解HTTP302.303.307状态码的来龙去脉,决定对其做深究并总结于本文.       <HTTP权威指南>第3章在讲解30X状态码时,完全没有讲清楚为什么要有 ...

  10. <a>链接的四个伪类顺序

    <a>元素的作用是可以创建一个链接,链接对应4个状态:未访问,已访问,鼠标悬停,鼠标点击瞬间. 为了给链接的4个状态应用样式,引入伪类的概念. 什么是伪类呢?简单点说,就是你没定义这个类, ...