一年半没更新是因为自己转岗了,android framework+system转前端,可以想象过程之苦逼,苦成了一首诗:很烦很烦/非常烦/非常非常十分烦/特别烦特烦/极其烦/贼烦/简直烦死了/啊——。烦之余秉承人丑多看书的古训,啃书无数,成笔记百余篇,不成体系。每每回想,总是忘却了大多数,于是要整理一下,如趁尚未排泄出去要反刍几口,回味一下。
整理自是从近及远整理,所以随笔内容应该是由难到易,自顾自说,完全不考虑旁观人士。
开始。
最近在看grunt,说简单点就是个前端管理工具,如maven、ant之于java。放在一年半前,我会说“前端工程还需要管理?”,在经历了对QA无数次“JS没更新、你Ctrl+F5刷新一下嘛”,对运营“又要压缩?我一个一个文件压缩很累的”,对PL“这文件夹下都100多个文件了,没分类,还好多重构后废弃的”之后,我终于感觉到,前端还是需要管理的。
grunt是什么?是一个运行在node上的插件,所以要运行grunt先要把node的环境搭建好。
grunt能做什么?合并,压缩,混淆,编码重命名,修改html中的引用,甚至于语法检测、单元测试等等。
这样说是没有概念的,首先全局安装grunt-cli
npm install -g grunt-cli
现在你就可以使用grunt这个命令了,但这是米有意义的,因为grunt-cli的功能是调用当前目录下的grunt模块,本身不具备任何功能。也就是说grunt是局部安装的,这样不同的项目可以使用不同版本的grunt。
好了,现在要新建一个文件夹,进入然后执行
npm init //按指示生成package.json,如果单纯测试grunt,这个文件是可以缺失的
npm install grunt --save-dev //安装并保存依赖到package.json
再次执行grunt会提醒Gruntfile.js文件的缺失,这是grunt所有行为的入口,所以要新建Gruntfile.js文件,这个文件的结构分为4部分。
- wrapper
module.exports = function(grunt) {
// 所有的代码写在这里,注意传入参数grunt
}; - 任务配置
grunt.initConfig({
concat: {},
cssmin: {},
uglify: {}
}); - 加载插件
grunt.loadNpmTasks('grunt-contrib-concat'); //前提是使用npm install grunt-contrib-concat --save-dev
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');这个部分可被load-grunt-tasks替代,在wrapper第一行进行配置
require('load-grunt-tasks')(grunt); //速度较慢,同样需要install
- 自定义任务
grunt.registerTask('default', ['concat', 'cssmin', 'uglify']);
执行grunt时默认执行default任务,如果这个部分缺失,则需要使用下列命令分别执行第2部分中注册的任务
grunt concat
grunt cssmin
grunt uglify
以上是grunt的入门部分,官网相对更加详尽,下一篇简述下Gruntfile.js中task的配置规则。
闲话和grunt的更多相关文章
-
没有闲话和grunt.initConfig()
grunt.initConfig()为Gruntfile.js的核心部分,它接收对象作为参数. 对象包含两种类型的属性,一种是单纯的变量,一种是task类型.举个栗子: grunt.initConfi ...
-
AngularJS——grunt神器的安装
前言: 刚开始学 angularJS,在慕课网上看的大漠老师的视频(http://www.imooc.com/learn/156),里面刚开始讲述了前端开发-调试-测试所使用的手段和工具,本人对前端开 ...
-
grunt之concat、cssmin、uglify
周末有点懒,跑去看了<智取威虎山>,手撕鬼子的神剧情节被徐老怪一条回忆线就解释过去了,牛到极致尽是这种四两拨千斤的处理方式,手撕加分,四星推荐. --------------------- ...
-
使用grunt实现自动化单元测试
闲话不多说~ 使用步骤 1.安装插件 npm install grunt-contrib-qunit --save-dev 2.加载包含 "qunit" 任务的插件 grunt.l ...
-
初学seaJs模块化开发,利用grunt打包,减少http请求
原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...
-
grunt配置任务
这个指南解释了如何使用 Gruntfile 来为你的项目配置task.如果你还不知道 Gruntfile 是什么,请先阅读 快速入门 指南并看看这个Gruntfile 实例. Grunt配置 Grun ...
-
快速开发Grunt插件----压缩js模板
前言 Grunt是一款前端构建工具,帮助我们自动化搭建前端工程.它可以实现自动对js.css.html文件的合并.压缩等一些列操作.Grunt有很多插件,每一款插件实现某个功能,你可以通过npm命名去 ...
-
是时候搁置Grunt,耍一耍gulp了
也算是用了半年Grunt,几个月前也写过一篇它的入门文章(点此查看),不得不说它是前端项目的一个得力助手.不过技术工具跟语言一样日新月异,总会有更好用的新的东西把旧的拍死在沙滩上(当然Grunt肯定没 ...
-
应用Grunt自动化地优化你的项目前端
在不久前我曾写了一篇 应用r.js来优化你的前端 的文章,为大家介绍了r.js这个实用工具,它可以很好地压缩.合并前端文件并打包整个项目.但是如果将r.js放到项目中,我们不得不顾及到一个问题——项目 ...
随机推荐
-
洛谷 P1414 又是毕业季II Label:None
题目背景 “叮铃铃铃”,随着高考最后一科结考铃声的敲响,三年青春时光顿时凝固于此刻.毕业的欣喜怎敌那离别的不舍,憧憬着未来仍毋忘逝去的歌.1000多个日夜的欢笑和泪水,全凝聚在毕业晚会上,相信,这一定 ...
-
{A} + {B} 分类: HDU 2015-07-11 18:06 6人阅读 评论(0) 收藏
{A} + {B} Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total ...
-
CSS远程加载字体
CSS 远程加载字体的方法,做网站CSS的都知道,用户浏览网站时,网页上的字体是加载本地的.换言之,如果网站使用了用户电脑所没有安装的字体,那显示字体就会被默认字体所代替了,自然效果就大受影响了. 上 ...
-
推荐——基于python
资料来源: <集体智慧编程>&网络 一.推荐系统 概述 定义 *定义: 推荐系统属于资讯过滤的一种应用. 推荐系统能够将可能受喜好的资讯或实物(例如:电影.电视节目.音乐.书 ...
-
Java快速排序算法
快速排序算法思想: 快速排序(Quicksort)是对冒泡排序的一种改进. 快速排序由C. A. R. Hoare在1962年提出.它的基本思想是:通过一趟排序将要排序的数据分割成独立的两部分,其中一 ...
-
mysql Navicat 连接MySQL 8.0.11 出现2059错误
https://www.cnblogs.com/lifan1998/p/9177731.html 原因 mysql8 之前的版本中加密规则是mysql_native_password,而在mysql8 ...
-
解决Navicat连接MySQL总是报错1251的方法
今天下了个 MySQL8.0,发现Navicat连接不上,总是报错1251: 原因是MySQL8.0版本的加密方式和MySQL5.0的不一样,连接会报错. 试了很多种方法,终于找到一种可以实现的: 更 ...
-
mybatis插入一个对象后获取表中自增的主键Id并且传入到插入的的对象中,方便将对象中其他属性赋值给其他以前表主键Id作为非空字段的表
原本的sql语句为: <insert id="xx" parameterType="com.hrt.partner.model.ShopInsert"&g ...
-
Github+阿超运算
感谢自己寒假能够稍稍做一点努力. Github个人页面<构建之法阅读笔记二可见>: https://github.com/Heartxy8990 申请教程: http://jingyan. ...
-
C++的类大小
有以下C++类 #pragma pack(push) #pragma pack(1) class task /*:public OSThread*/{ //public: // void Entry( ...