原文地址:Grunt学习使用必看 grunt简介神马的不多说,到处一大堆. 我只说说我已经实现了的代码. 按照官方的教程 相信已经配置好了,接下来说 package.json 和 Gruntfile.js这2个文件,package.json是为了告诉grunt我们用哪些插件,这些插件的版本是多少,以及我这个项目的一些信息. 那有人说我怎么知道我需要什么插件,我怎么写这个文件?请看官方的例子: { "name": "my-project-name", "ve…

本文主要讲Grunt任务配置. 说明:本文所有示例都基于Grunt 0.4.5版本. 一 说明 使用Grunt实现项目的打包等工程化工作,实际上是通过Grunt提供的机制和插件,配置一个个任务(例如:拷贝内容.混淆压缩.格式检查.清除等),当输入grunt命令时,就逐个执行配置好的任务,从而实现项目打包等工程化工作. Grunt的任务配置都是在 Gruntfile.js文件 中的grunt.initConfig(configObj)参数configObj中指定的.如果你还不知道 Gruntfil…

有些时候,项目中的静态资源,比如图片占用的文件有点大,影响加载的速度,所以会选择grunt对其进行压缩打包.对于grunt其他的用法,还在继续学习中,先记录下关于grunt的一些学习. grunt是一套基于Node.js的命令行工具,所以先确保环境中已安装好了Node环境. 接着安装grunt,如下: 1.安装CLI CLI是grunt命令行,先将其安装到全局环境中.点击开始->运行->cmd,执行以下命令进行安装: npm install -g grunt-cli 安装一次即可,以后就可以在…

什么是grunt?  Grunt是一个JavaScript任务运行器,用于自动执行频繁任务(如压缩,编译,单元测试)的工具.它使用命令行界面来运行在文件中定义的自定义任务(这个文件称为Gruntfile). Grunt由Ben Alman创建,用Node.js编写.它通过npm分发.现在,Grunt生态系统中有超过5,000个插件可用. 如何使用grunt? 基本概念 1.CLI(Command-line interface):Grunt的命令行界面(CLI)可以通过npm全局安装.执行grun…

Grunt和 Grunt 插件是通过npm安装并管理的, npm是Node.js的包管理器. 第一步:先安装node.js环境 第二步:安装Grunt-CLI 在node.js命令工具中输入npm install -g grunt-cli 敲击回车即可安装. -g为在全局安装. 第三步:在本地建一个文件夹,dos命令进入该文件夹下,输入npm init 配置package.json. 第四步:配置好了包的json文件,这一步开始安装Grunt,输入命令 npm install grunt --s…

1. 在使用grunt前需要执行的几条命令和用途 npm uninstall -g grunt  删除掉全局grunt npm install -g grunt-cli 把grunt加入你的系统搜索路径中 npm init 自动创建一个基本的 package.json 文件 npm install <module> –save-dev  安装一个grunt插件,并在package.json文件中将它添加到devDependencies属性中(目前尚不清楚devDependencies和depe…

1 grunt 安装  全局安装 npm install -g grunt-cli 2 配置好package.json 和 Gruntfile 文件,这两个文件必须位于项目根目录下. 2.1package.json配置实例 {{ "name": "web", "version": "2.1.0", "description": "A simple ui framework based on Zep…

你需要检查js语法错误,然后再去压缩js代码.如果这两步你都去手动操作,会耗费很多成本.Grunt就能让你省去这些手动操作的成本. “—save-dev”的意思是,在当前目录安装grunt的同时,顺便把grunt保存为这个目录的开发依赖项.看到“开发依赖项”这一次,是不是觉得有些眼熟?上文在配置package.json时,其中的“devDependencies”中就会存储开发依赖项. 下面就是一些常有grunt开发依赖插件 Contrib-jshint——javascript语法错误检查:Con…

bower是什么?官网给出的  a package manager fow the web.简单说引入文件版本管理,例如jquery,传统做法到jquery的官网下载下,在引入,这样比较繁琐,也不利用自动化,bower就是解决这一问题. 一.bower的安装 npm install -g bower # npm安装包就不多说 二.检测bower bower -v 三.以jquery为例提供四种方法,分别是官方提供.git的remoteRepository.github地址.url # regis…

1. 新建文件和文件目录 mkdir grunt-in-action cd grunt-in-action cd grunt-in-action mkdir grunt-empty cd grunt-empty vim index.html mkdir js cd js vim index.js cd .. 2. npm和grunt初始化 npm init npm install grunt --save-dev npm install //如果想要node_module,就 加载 3. 安装t…

grunt是前端自动化工具之一.下面是是grunt的简单小示例: 在使用grunt,确保安装nodejs,如果不清楚,可以百度找相关教程,这个教程已经烂大街了. 1.打开cmd,以管理员的身份.(或者使用编辑器自带的终端或控制器(其实也cmd).这里我使用git shell) 2.安装grunt npm install -g grunt-cli 和安装node_modules: npm init //初始化 npm install //安装node模块 3. 新建项目目录,在src创建一个tes…

  下载安装github客户端. http://windows.github.com 打开github客户端. 登录后,点击左上角的加号,可以创建一个Repository. (也可以点击Clone,将github上面的项目克隆到本地.) 创建完成后,点击右上角的 Publish Repository, 就可以将这个Repository发布到github上面. 如果没有安装node.js,就安装node.js. 用npm在全局安装grunt. 安装grunt-init.   打开git shell…

本文主要讲如何用Grunt打包AngularJS的模板HTML. 一 说明 AngularJS中使用单独HTML模板文件的地方非常多,例如:自定义指令.ng-include.templateUrl等.通常这些文件都是独立的html文件,AngularJS中使用这些文件都是通过文件路径地址引用的. 当用Grunt打包压缩整个项目时,如何处理这些html模板文件呢?本文讲的grunt-angular-templates插件可以解决该问题. grunt-angular-templates插件的基本原理…

本文主要讲如何使用Grunt实现less文件压缩. 一 说明 less是非常常用的样式框架之一,Grunt也提供了可以编译和打包less样式文件的插件:grunt-contrib-less. 实现原理分析: 分析该插件源码,可以发现该插件实际只做了对样式文件的各种处理,真正进行编译less文件到css文件,实际还是调用的less库的less.render方法实现的. 如下是grunt-contrib-less库源码: 二 安装 npm install grunt-contrib-less --s…

本文主要讲如何使用Grunt实现RequireJS文件压缩. 一 说明 ES6出来前,RequireJS是JavaScript模块化最常用的方式之一.对于使用RequireJS构建的项目,要实现打包压缩,需要使用grunt-contrib-requirejs插件. 二 安装 npm install grunt-contrib-requirejs --save-dev 三 加载任务 grunt.loadNpmTasks('grunt-contrib-requirejs'); 四 配置 在Grunt…

本文主要讲expand使用方法. 当你希望处理大量的单个文件时,这里有一些附加的属性可以用来动态的构建一个文件列表.这些属性都可以用于 Compact 和 Files Array 文件映射格式. expand 设置为true将启用下面的选项: cwd 所有src指定的匹配都将相对于此处指定的路径(但不包括此路径) . src 相对于cwd路径的匹配模式. dest 目标文件路径前缀. ext 对于生成的dest路径中所有实际存在文件,均使用这个属性值替换扩展名. extDot 用于指定标记扩展名…

本文主要讲通配符和模板的基本使用方法. 一 通配符 通常分别指定所有源文件路径是不切实际的,因此Grunt通过内置支持node-glob 和 minimatch 库来匹配文件名(又叫作globbing). 然这并不是一个综合的匹配模式方面的教程,你只需要知道如何在文件路径匹配过程中使用它们即可: * 匹配任意数量的字符,但不匹配 / ? 匹配单个字符,但不匹配 / ** 匹配任意数量的字符,包括 /,只要它是路径中唯一的一部分 {} 允许使用一个逗号分割的“或”表达式列表 ! 在模式的开头用于排…

本文主要讲配置任务中的filter,包括使用默认fs.Stats方法名和自定义过滤函数,以及filter的实现原理. 通过设置filter属性可以实现一些特殊处理逻辑.例如:要清理某个文件夹下的所有空文件夹,这时使用clean任务时,需要判断该文件夹下的哪些是文件,哪些是文件夹,只对空文件执行clean任务. 具体使用方法分为如下两种: 一 使用fs.Stats方法作为过滤函数 fs.stats是NodeJS的一个类,上边提供了很多对文件判断的方法,具体可以参考这里. 如下将filter设置为'…

题记:虽然现在大家都在推Webpack,无奈业务需要,因此研究下Grunt. 说明:本文是基于Grunt 0.4.5版本. 一 说明 为何要用构建工具? 一句话:自动化.对于需要反复重复的任务,例如压缩(minification).编译.单元测试.linting等,自动化工具可以减轻你的劳动,简化你的工作.当你在 Gruntfile 文件正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作. 为什么要使用grunt? Grunt 生态系统非常庞大,并且一直在增长.由于拥有数量庞…

一.通过bower help 来展开bower的命令 Usage: bower <command> [<args>] [<options>] Commands: cache Manage bower cache help Display help information about Bower home Opens a package homepage into your favorite browser info Info of a particular packag…

一.Ant-Design学习 因为Ant-Design是基于React实现的,之前自己也学过一段时间的React,对React还是相对比较熟悉的,在学习Ant-Design也还不算吃力. 最开始是从源码看起,从最简单的Icon组件看的,然后连续看了几个组件就有点吃不消了,哈哈哈.所以就改为实战了. 在Ant-Design官网上有一个Ant-Design快速上手的教程https://ant.design/docs/react/practical-projects-cn,可以跟着它学习一下,你可以从…

高效开发之SASS篇   作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家都知道,js中可以自定义变量,css仅仅是一个标记语言,不是编程语言,因此不可以自定义变量,也不可以引用等等.作为一名程序员,不能编程怎么能忍受,这就是sass存在的意义,工业化生产,让CSS程序范儿. 主要目的就是让你写CSS时不在重复. SASS优点可以简单的规纳为以下几点: 增加了一些编程特性…

当时学习 Grunt 的时候,真是很头疼.分了两个时间段,学习了两次才硬啃下来,之后才能用在项目中.主要原因我认为是学习资料和文档上面写的太高端了.这类的文档或者资料有个显著特点,上来先简单介绍一下这个玩意(Grunt 是一个 JavaScript 任务运行器),然后就是如何安装,直接给你配置文件的语法,如何使用插件,新手往往看完还不知所以然. 就像我第一次学习的时候,只是大体知道 Grunt 很火,大家都在用,但耐着心看文档和一些别人的学习总结,还是困惑,这到底是个什么东西?究竟干什么用?为什…

为保证作者版权在此声明本文部分摘自 http://yujiangshui.com/grunt-basic-tutorial/   另,参考文章 http://www.tuicool.com/articles/yABV73 及官方英文文档 http://gruntjs.com/plugins   开始学习 Grunt 它就是一个工具框架,有很多插件扩展它的功能. 是一套前端自动化工具,基于nodeJS的命令行工具,一般用于: ① 压缩文件 ②合并文件 ③简单语法检查 Grunt 基于 Node.j…

今天看到一篇通俗易懂的Grunt入门文章,博主写得很用心,原文请戳:http://yujiangshui.com/grunt-basic-tutorial/ 当时学习 Grunt 的时候,真是很头疼.分了两个时间段,学习了两次才硬啃下来,之后才能用在项目中.主要原因我认为是学习资料和文档上面写的太高端了.这类的文档或者资料有个显著特点,上来先简单介绍一下这个玩意(Grunt 是一个 JavaScript 任务运行器),然后就是如何安装,直接给你配置文件的语法,如何使用插件,新手往往看完还不知所以…

本文转自:http://yujiangshui.com/grunt-basic-tutorial/ 当时学习 Grunt 的时候,真是很头疼.分了两个时间段,学习了两次才硬啃下来,之后才能用在项目中.主要原因我认为是学习资料和文档上面写的太高端了.这类的文档或者资料有个显著特点,上来先简单介绍一下这个玩意(Grunt 是一个 JavaScript 任务运行器),然后就是如何安装,直接给你配置文件的语法,如何使用插件,新手往往看完还不知所以然. 就像我第一次学习的时候,只是大体知道 Grunt 很…

Grunt 新手一日入门 2014.06.20 前端相关 TOC 1. 用途和使用场景 2. 开发一个任务自动处理器 3. 开始学习 Grunt 3.1. 安装 Grunt 3.2. 生成 package.json 文件 3.3. 安装 Grunt 和所需要的插件 3.4. 配置 Gruntfile.js 的语法 3.4.1. 任务配置代码 3.4.2. 插件加载代码 3.4.3. 任务注册代码 3.5. 配置 Gruntfile.js 3.6. 项目文件传输与协作 4. 总结与扩展阅读 当时学…

Gulp.js简介 我们讨论了很多关于怎么减少页面体积,提高重网站性能的方法.有些是操作是一劳永逸的,如开启服务器的gzip压缩,使用适当的图片格式,或删除一些不必要的字符.但有一些任务是每次工作都必须反复执行的.如 新图片或修改后图片的压缩 去除调试语句如console,debugger 合并和压缩css和js 把更新的文件部署到服务器 你可能设想大家都会记住所有的这些操作,但总会有人忘记一两条.随着项目越来越大,上面的工作越来越浪费时间.只好设专人来完成这些枯燥的工作. 能不能让这些工作不用…

我们讨论了很多关于怎么减少页面体积,提高重网站性能的方法.有些是操作是一劳永逸的,如开启服务器的gzip压缩,使用适当的图片格式,或删除一些不必要的字符.但有一些任务是每次工作都必须反复执行的.如 新图片或修改后图片的压缩 去除调试语句如console,debugger 合并和压缩css和js 把更新的文件部署到服务器 你可能设想大家都会记住所有的这些操作,但总会有人忘记一两条.随着项目越来越大,上面的工作越来越浪费时间.只好设专人来完成这些枯燥的工作. 能不能让这些工作不用占用人手呢? 你需要…

在离开上一家公司之前,team leader 在我离开前留给了我最后几个关键字:karma,断言库,JASMINE,QUNIT,MOCHA. 可一直拖拖沓沓的,没有去了解.直到今天,才终于抽出心情和时间来研究它. 在文章开始之前,首先对前 team leader — 满爷 表示感激. 虽然你不是我所见过的最优秀的前端,但你是我所见的最乐意与小伙伴share经验心得的 team leader. OK,言归正传,开始主题... 关于karma Karma是一个基于Node.js的JavaScript…