【grunt】两小时入门
- jshint代码检查
- 代码合并
- 代码压缩--js/css/html都可以
- SASS/LESS编译css
- watch监听---文件发生改变自动执行任务
npm install -g grunt-cli

- 将images/html和复制到 发布文件夹build下
- 用jshint检查js语法
- 合并四个js文件(分别合并,因为a,b用于不同的页面)
- 编译scss文件
- 压缩合并后的js文件,存储到build下
- 调试:新建一个本地服务器监听文件改变自动刷新HTML文件


- 复制文件:grunt-contrib-copy
- 合并文件:grunt-contrib-concat
- 语法检查:grunt-contrib-jshint
- Scss 编译:grunt-contrib-sass
- 压缩文件:grunt-contrib-uglify
- 监听文件变动:grunt-contrib-watch
- 建立本地服务器:grunt-contrib-connect



npm install --save-dev grunt-contrib-copy grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect

- "wrapper" 函数
- 项目与任务配置
- 加载grunt插件和任务
- 自定义任务

grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } });
其中先写了一句 pkg: grunt.file.readJSON('package.json') 功能是读取 package.json 文件,并把里面的信息获取出来,方便在后面任务中应用(例如下面就用了 <%= pkg.name %> 来输出项目名称),这样可以提高灵活性。
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']);
(default是默认的task,当你在命令行执行grunt的时候,会执行注册在default上的任务)
grunt.registerTask('compress', ['uglify:build']);
如果想要执行这个 task,我们需要在命令行输入 grunt compress 命令来执行这条 task,而这条 task 的任务是 uglify 下面的 build 任务,也就是说,我们只会执行 uglify 里面 build 定义的任务,而不会执行 uglify 里面定义的其他任务。
//wrapper函数 module.exports = function(grunt) { //你可以像普通的js文件一样添加自己的代码 var sassStyle = 'expanded'; //1.配置任务 tasks--根据插件的文档来定义任务 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), //将html和图片从src复制到build copy: { //task html: { //target files: [ { expand: true, cwd: './src/html', src: '*', dest: './build/html/' } ] }, images: { //target files: [ { expand: true, cwd: './src/images', src: '*', dest: './build/images/' } ] } }, //合并js concat: { /* options: { separator: ';',//合并分隔符 }, */ dist: { files: { //文件路径 './src/js/a.all.js': ['./src/js/a.1.js', './src/js/a.2.js'], './src/js/b.all.js': ['./src/js/b.1.js', './src/js/b.2.js'] } }, }, //task:编译sass sass: { output: { //target options: { //target options style: sassStyle }, files: { './build/css/style.css': './src/scss/style.scss' //'目标文件':'源文件' } } }, //代码检查 jshint: { all: ['./src/js/a.all.js', './src/js/b.all.js'] }, //压缩 uglify: { uglifyjs: { files: { './build/js/a.min.js': ['./src/js/a.all.js'], './build/js/b.min.js': ['./src/js/b.all.js'] } } }, //监听 watch: { scripts: { files: ['./src/js/a.1.js', './src/js/a.2.js', './src/js/b.1.js', '/src/js/b.2.js'], tasks: ['concat', 'jshint', 'uglify'] }, sass: { files: ['./src/scss/style.scss'], tasks: ['sass'] }, livereload: { options: { liverelload: '<%= connect.options.livereload %>' }, files: [ './src/html/index.html', './src/scss/style.scss', './src/js/a.1.js', './src/js/a.2.js', './src/js/b.1.js', './src/js/b.2.js' ] } }, connect: { options: { port: 9000, open: true, livareload: 35729, //change this to '0.0.0.0' to access the server from outside hostname: 'localhost' }, server: { options: { port: 9001, base: './' } } } }); //2.加载插件 grunt.loadNpmTasks('grunt-contrib-copy'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-connect'); //3.注册任务 grunt.registerTask('copyhtml', ['copy:html']); //可以用task:target的方法分别注册 grunt.registerTask('concatjs', ['concat']); //也可以只用task名称注册,默认执行task下全部target grunt.registerTask('outputcss', ['sass']); grunt.registerTask('watchit', ['concat', 'sass', 'jshint', 'uglify', 'connect', 'watch']); grunt.registerTask('default', ['copy', 'concat', 'sass', 'jshint', 'uglify']); }


- 上述例子仅供学习,有些配置还值得推敲,具体的插件配置文档还有很多细节可以学习。
【grunt】两小时入门的更多相关文章
- mongodb 两小时入门
传统的计算机应用大多使用关系型数据库来存储数据,比如大家可能熟悉的MySql, Sqlite等等,它的特点是数据以表格(table)的形式储存起来的.数据库由一张张排列整齐的表格构成,就好像一个Exc ...
- 两小时入门Docker
引入 Docker是什么? Docker 最初是 dotCloud 公司创始人 Solomon Hykes 在法国期间发起的一个公司内部项目,于 2013 年 3 月以 Apache 2.0 授权协议 ...
- 《Qt Quick 4小时入门》学习笔记
http://edu.csdn.net/course/detail/1042/14804?auto_start=1 Qt Quick 4小时入门 第五章:Qt Quick里的信号与槽 QML中 ...
- 一小时入门 Python
因为需求, 需要用到py, 所以来学学py, 因为有java基础 一小时入门py语法是不成问题的, 但是仅仅入门基础语法而已, 不涉及算法,不涉及大数据,机器学习,人工智能, 但是py这么火爆,就在于 ...
- 每天自学两小时Python,整理了最详细的学习路线和规
上次这篇文章每天自学两小时Python,三个月学通月入20K主要是给大家整理了学习资料视频和PDF书籍,很多需要的都关注私信领取了. 很多朋友领取之后都问我教程有了那么应该从哪去开始学习呢,私信太多我 ...
- 《Qt Quick 4小时入门》学习笔记4
http://edu.csdn.net/course/detail/1042/14806?auto_start=1 Qt Quick 4小时入门 第七章:处理鼠标与键盘事件 1.处理鼠标事件 鼠标信号 ...
- 《Qt Quick 4小时入门》学习笔记3
http://edu.csdn.net/course/detail/1042/14807?auto_start=1 Qt Quick 4小时入门 第八章:Qt Quick中的锚(anchors)布局 ...
- 《Qt Quick 4小时入门》学习笔记2
http://edu.csdn.net/course/detail/1042/14805?auto_start=1 Qt Quick 4小时入门 第五章:Qt Quick基本界面元素介绍 1. ...
- Uber选拔专车司机:五年以上驾驶经验 两小时视频培训
摘要:说起当时下流行打车软件Uber的司机,还得从春节前在上海一次打车说起.那几天,记者在上海某商场逛到打烊时间,大包小包拎着袋子根本腾不出手拦出租车,而商场门口的出租车临时停靠点更是挤满“血拼”而归 ...
随机推荐
- 一小时学会ECMAScript6新特性
ECMAScript 简介 简称es,是一套标准,javascript就是使用这套标准的语言.主流的浏览器使用的是ECAMScript5,ECAMScript6(ECAMScript2015)是一涛新 ...
- [补档][NOIP2015] 斗地主
[NOIP2015] 斗地主 题目 传送门:http://cogs.pro/cogs/problem/problem.php?pid=2106 INPUT 第一行包含用空格隔开的2个正整数Tn,表示手 ...
- GPUImage原理
GPUImage是一个开元的基于GPU的图片或视频的处理框架,其本身内置了多达120多种常见的滤镜效果,并且支持照相机和摄像机的实时滤镜,并且能够自定义图像滤镜. 美颜的基本概念 OpenGL ES: ...
- HTML5——JSON的方法实现对象copy
JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript (w3c制定的js规范)的一个子集,采用完全独立于编程语言 ...
- css超简单实现div页面居中【适合做弹出框】
1.前言 现在项目中用到弹出框的话大部分都是直接用控件的.不过有控件虽方便,但有时候会有冲突的地方.我上次用layui的弹出框控件,然后也用到了百度的编辑器uEditor,然后一切都好好的,结果编辑赋 ...
- python编程基础知识—字典
字典 在python中,字典是一系列键-值对,每个键都与一个值相关联,可使用键来访问相关联的值.与键相关联的值可以是数字.字符串.列表乃至字典,即可将任何python对象用在字典中的值. 在pytho ...
- 自适应Simpson积分
自适应Simpson积分 作用 如标题所示,这玩意就是当你不会微积分的时候来求积分的. 总所周知,积分的定义就是函数的某一段与坐标轴之间的面积. 那么,自适应Simpson积分就是一种可以再某些精度下 ...
- EXT.NET复杂布局(二)——报表
前面提到过工作台(<EXT.NET复杂布局(一)--工作台>)了,不知道各位看过之后有什么感想.这次就介绍介绍使用EXT.NET画几个报表. 看图写作从小学就开始了,如图: 图一 图二 图 ...
- ==和equals()的区别
简单的一句话说明就是: == 比较Stack中的值(引用数据类型stack中存放的是对象的堆内存地址). equals() 通常被覆写为比较对象的值 那么==和equals()之间到底有什么具体的区别 ...
- 在配置wem.xml后,Tomcat遇到问题,启动失败的解决方法
前两天在写程序时,碰到了Tomcat无法启动的问题,就是在配置完web.xml后.想必好多小伙伴都有遇到吧. 如图: 出现这个错误的原因是:在配置web.xml的时候出现了错误! 如图所示,没有修改这 ...