grunt安装和使用教程
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安装和使用教程的更多相关文章
- Grunt安装配置教程:前端自动化工作流
Grunt这货是啥? Grunt 是一个基于任务的 JavaScript 项目命令行构建工具. 最近很火的前端自动化小工具,基于任务的命令行构建工具 http://gruntjs.com Grunt能 ...
- webpack安装配置使用教程详解
webpack安装配置使用教程详解 www.111cn.net 更新:2015-09-01 编辑:swteen 来源:转载 本文章来为各位详细的介绍一下关于webpack安装配置使用教程吧,这篇文章对 ...
- javascript grunt安装和使用
grunt是javascript世界的构建工具. 为何要用构建工具? 一句话:自动化.对于需要反复重复的任务,例如压缩(minification).编译.单元测试.linting等.自动化工具可以减轻 ...
- Grunt实践之简易教程
以前自己太low了,都没用过高大上的前端自动化打包工具,开发方式也是偏传统的.加入到新的团队后得拼命赶上啊,前端技术更迭太快,各种技术层出不穷,智商都快不够用了.看人家都用的牛逼哄哄的技术,自己还守着 ...
- CentOS7下自定义目录安装mono+jexus教程
一.阅读前须知: 1.本文属于安装完Centos7之后的步骤 2.如果还不了解mono,请点击mono 3.本篇主要内容是使用自定义目录安装mono+jexus教程,使用默认目录请查看使用默认目录安装 ...
- 【转】真正从零开始,TensorFlow详细安装入门图文教程!(帮你完成那个最难的从0到1)
AI这个概念好像突然就火起来了,年初大比分战胜李世石的AlphaGo成功的吸引了大量的关注,但其实看看你的手机上的语音助手,相机上的人脸识别,今日头条上帮你自动筛选出来的新闻,还有各大音乐软件的歌曲& ...
- CentOS7下默认目录安装mono+jexus教程
一.阅读前须知: 1.本文属于安装完Centos7之后的步骤 2.如果还不了解mono,请点击mono 3.本篇主要内容是使用默认目录安装mono+jexus教程,使用自定义目录请查看使用自定义目录安 ...
- << CocoaPods安装和使用教程 >>github code4app以及cocoachina 苹果官方文档
developer.apple.com 英文搜索各个技术的官方介绍文档, 前提是英文过关 cocoachina ios最新新闻, 信息 code4app上有许多组件 http://www.code4a ...
- grunt安装
随着node的流行,各种后台的技术应用到前端,依赖注入.自动化测试.构建等等. 本篇就介绍下如何使用Grunt进行构建. grunt安装 由于grunt依赖于nodejs,因此需要先安装nodejs. ...
随机推荐
- Hadoop 之 MapReduce 框架演变详解
经典版的MapReduce 所谓的经典版本的MapReduce框架,也是Hadoop第一版成熟的商用框架,简单易用是它的特点,来看一幅图架构图: 上面的这幅图我们暂且可以称谓Hadoop的V1.0版本 ...
- 【Linux】Vim语法高亮显示
配置vim 1. 安装vim2. 在hom创建文件.vimrc3. 修改.vimrc内容 syntax=on4. 打开vim,完成! 注: 预转的Vim(比如我现在的Linux Mint)不是完整版, ...
- java int与integer的区别
int与integer的区别从大的方面来说就是基本数据类型与其包装类的区别: int 是基本类型,直接存数值,而integer是对象,用一个引用指向这个对象 1.Java 中的数据类型分为基本数据类型 ...
- openstack 命令行管理 - 目录
原文http://blog.csdn.net/signmem/article/details/19513775 相关 openstack 命令行管理, 分下面部分进行介绍 openstack 命令行 ...
- ajax请求成功后新开窗口window.open()被拦截解决方法
ajax 异步请求成功后需要新开窗口打开 url,使用的是 window.open() 方法,但是很可惜被浏览器给拦截了,怎么解决这个问题呢 问题: 前面开发项目时碰到一个问题,ajax 异步请求 ...
- 【转载、推荐】不要自称是程序员,我十多年的 IT 职场总结
注评:一气读完后,有些和我的观点类似.这篇文章显然是外国老写的,但是不妨碍我们的跨国交流. 如果我可以给每个工程教育增加一门课,它不会涉及编译器.门电路或是时间复杂度,而是一门介绍行业现实的入门课,因 ...
- 【2016-10-17】【坚持学习】【Day9】【反射】
3个主要命名空间 System.Type System.Reflection System.Reflection.Assembly 2个主要类 System.Type System.Reflectio ...
- Nim游戏
目前有3堆石子,每堆石子个数也是任意的,双方轮流从中取出石子,规则如下:1)每一步应取走至少一枚石子:每一步只能从某一堆中取走部分或全部石子:2)如果谁不能取谁就失败. Bouton定理: 必败状态当 ...
- mysql 性能优化方案
网 上有不少MySQL 性能优化方案,不过,mysql的优化同sql server相比,更为麻烦与复杂,同样的设置,在不同的环境下 ,由于内存,访问量,读写频率,数据差异等等情况,可能会出现不同的结果 ...
- 设计模式——抽象工厂(Abstract Factory)
Abstract Factory 抽象工厂模式(创建型模式): new的问题:实现依赖,不能应变应对“具体实例化类型”的变化. 解决思路:--封装变化点:哪里变化,封装哪里 - - ...