GruntJS 是基于JavaScript的命令行构建工具,它可以帮助开发者们自动化重复性的工作.你可以把它看成是JavaScript下的Make或者Ant.它可以完成诸如精简.编译.单元测试.lint检查等工作.由于越来越多的开发移到了客户端,帮助开发者更高效地工作的工具就更有用了.本文中,我将展示我如何使用GruntJS来精简javascript文件.我们也将使用GruntJS的markdown插件来将markdown文档转换为HTML5文档.让我们开始吧! 为什么开发者要关心GruntJS…

grunt-usemin: Replaces references to non-optimized scripts or stylesheets into a set of HTML files usemin exports 2 different tasks: useminPrepare prepares the configuration to transform specific construction (blocks) in the scrutinized file into a s…

预编译Underscore模板到JST文件(Underscore:JS工具库) generate JavaScript template functions Gruntfile的配置实例: module.exports = function(grunt) { grunt.initConfig({ jst: { bulid: { files: [{ expand: true, // 开启构建动态文件对象 cwd: 'static/tpl/', // 模板目录(源文件) src: ['**/*.ht…

为什么要合并.压缩你的JS文件?        一个项目开发完成我们总能发现有一堆js文件非常混乱.           一般在一个HTML文档加载的时候,浏览器会根据HTML代码从上到下读取所需要加载进来的CSS.JS.图片等文件,指定为异步加载的文件除外. 每读取一个文件,浏览器都会向Web服务器发送一个加载的请求,服务器觉得这个请求没问题后,浏览器才会开始接收文件.也就是说,每次加载一个文件都会消 耗一定的时间在服务器和客户端的来回上.          加载一个文件消耗的时间可以忽略不计…

PintJS 是一个小型.异步的 GruntJS 运行器,试图解决大规模构建流程中的一些问题. 典型的Gruntfile 会包括 jsHint,jasmine,LESS,handlebars, uglify,copy 以及 clean 任务.这些插件的配置很快就会让你的 Gruntfile 超过300行,如果再添加复杂的连接,版本控制等可能增长到1000+. PintJS 允许你对任务进行拆解,重新组织构建成可单独运行和测试的小块. 您可能感兴趣的相关文章 干货分享——32本优秀的 JavaSc…

由于大多数的任务执行文件操作,Grunt提供了一个强大的抽象声明说明任务应该操作哪些文件.这里总结了几种src-dest(源文件-目标文件)文件映射的方式,提供了不同程度的描述和控制操作方式. 1. Compact简洁格式 这种形式允许每个目标对应一个src-dest文件映射.通常用于只读任务,比如grunt-contrib-jshint.这种格式支持指定附加属性 grunt.initConfig({ jshint: { foo: { src: ['src/aa.js', 'src/aaa.js…

1.我们先来了解下模块化历史 模块化历史 nodeJS的出现(http://nodejs.org/) commonJS规范(http://www.commonjs.org/) 浏览器JS的模块化? AMD规范(http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition) requireJS库(http://requirejs.org/ CMD规范 Seajs采用的 我们通常开发前端的时候分为线下和线上,线下直接开发调试脚本,而线上是很…

Gruntjs是JavaScript项目的构建工具,也是基于node的一个命令行工具.很多开源JS项目都是使用它搭建.如jQuery.Qunit.CanJS等.它有以下作用 合并JS文件 压缩JS文件 单元测试(基于QUnit) 一句话:完全自动化(automation) 以下是它的安装过程. 一.安装node 参考nodejs入门 (最新的node会自动安装npm) 二.安装grunt命令行工具grunt-cli 使用-g全局安装,这样可以在任何一个目录里使用了.命令: npm install…

使用GruntJS链接与压缩多个JavaScript文件 自己写了个简单的HTML5 Canvas的图表库,可以支持饼图,折线图,散点图,盒子图 柱状图,同时支持鼠标提示,绘制过程动画效果等.最终我想把这些多个JS文件变成 一个JS文件发布出去,于是我的问题来啦,怎么把这些JS文件搞成一个啊,群里有个 朋友告诉我,GruntJS – JavaScript多文件编译,风格检查,链接与压缩神器.Google了一 把终于帮我完成这个任务,算是入门,分享一下过程. 一什么是GruntJS 不想翻译英文,…

一.Grunt.js简介(实现自动化) 1)简要说明: 1.GruntJs是基于node的javascript命令行工具,可以自动化构建.测试.生成文档的项目管理工具: 2.使用GruntJs可以自动化的管理子任务的运行: 3.很多开源JS项目都是使用它搭建.如jQuery.Qunit.CanJS等 2)使用原因: 1.合并js文件——为了明确模块分工,可能会将Javascript代码拆成很小很小的一个个js文件,为减少Http Request我们需要合并js文件 2.压缩js文件.css文件等…

在这里推荐一个Gruntjs的学习视频,非常不错! http://www.imooc.com/learn/30…

在本文中,如何使用GruntJS为了使治疗简单的前端性能优化自己主动,我写了一个完整的样本放在Github上.能够參考一下.关于Yahoo的前端优化规则请參考:Best Practices for Speeding Up Your Web Site 前端性能主要有图片的压缩.JS和CSS的合并.压缩.对全部静态文件的文件依据其内容加上hash,然后把CSS.HTML等文件里对全部的静态文件名称替换成加上hash的新文件名称.对全部的静态内容的路径上加上CDN的URL.最后将全部的静态文件上传到七…

nodejs的出现 让服务器端能运行 js commonjs规范 规范服务器端开发按照什么写法去写 包括模块化开发 ( 不同点 请求在本地 js加载) AMD规范 浏览器端开发的规范 (不同点: 浏览器 请求 http js加载异步的) require库采用 CMD规范 相当与 amd2.0升级版 seajs开发采用此规范 什么是构建工具:比如在开发网站 线上 线下开发 右键查看源代码压缩, 主要用于本地开发 不同文件合并在一起 多人协助 构建工具 是软件 自动化处理 代码 传到线上 webqq…

好文原文地址:http://segmentfault.com/a/1190000000354555 本文将首先介绍grunt-markdown插件如何配合HTML模板使用,接着我将介绍如何使用grunt-watch插件将工作效率提升至新层次.如果你不熟悉GruntJS,请先阅读我关于GruntJS的文章. Github仓库 今天的示例代码可以从github: day7-gruntjs-livereload-example中获取. 配合模板使用GruntJS的Markdown插件 在我上一篇Gru…

GruntJS 是基于JavaScript的命令行构建工具,它可以帮助开发者们自动化重复性的工作.你可以把它看成是JavaScript下的Make或者Ant.它可以完成诸如精简.编译.单元测试.lint检查等工作.由于越来越多的开发移到了客户端,帮助开发者更高效地工作的工具就更有用了.本文中,我将展示我如何使用GruntJS来精简javascript文件.我们也将使用GruntJS的markdown插件来将markdown文档转换为HTML5文档.让我们开始吧! 为什么开发者要关心GruntJS…

Grunt是基于Node.js的项目构建工具.它可以自动运行你所设定的任务,如编译less,sass,压缩js,合拼文件等等. (一)安装nodejs环境,Grunt 0.4.x要求Node.js的版本>=0.8.0,如果你已安装了nodejs,命令行中运行node -v查看你的Node.js版本,如果版本号不够,重新安装覆盖旧版本. (二)如果你的公司是用代理上网,先命令行 npm set proxy=http://ip地址 ,然后命令行 npm install -g grunt-cli 将g…

思考: 1.grunt以工程为单位安装插件? 如果有新工程就要重新安装插件或者把安装好的插件拷贝过去.这样很麻烦,解决方案是需要用grunt的项目统一放在grunt项目中. 2.每次需要针对项目编写gruntfile.js? a.我们可以把文件夹,路径用变量代替.传入xx.json或者用命令行传参的方式. 还记得initConfig中的grunt.file.readJSON('package.json')这个方法么?我们可以写一个config.json,用这个方法读入就可以获取变量. confi…

以下例子来自真实项目,有所删减 grunt-test project 目录结构如下 一我的目的: 1.在src-dev目录中开发最终产出于src目录 2.src-dev中的index目录相当于一个widget 二准备工作  完成这项工作我需要那些步骤才能做到呢. 1.需要先准备好合并压缩好的css(common/reset.css+index/c.css)合并压缩放置与一个零时文件夹中待用. 2.其次压缩index/j.js放置于零时文件夹中. 3.再者把css.js.tpl(index/t.h…

摆脱混乱的html文件中开发,拥有development与product模式是我们梦寐以求的. 我买的需求是: 1.产出一定格式的目录结构,以供日常开发使用,脚手架功能. 2.在开发模式环境中我们按照文件类型不同分开开发,甚至html也分成小的区块widget化利于协作开发和维护,产出时合并成一个html,外联资源inline化. 3.在编码过程中实时保存并自动刷新浏览器,可以查看结果. 4.编码过程中进行代码检查,单元测试. 5.产出环境我们把这些碎片文件按照逻辑顺序压缩合并打包到一起组合成h…

gruntjs是一个基于nodejs的自动化工具,只要熟悉nodejs或者又一定js经验就可以熟练应用. 1. 安装 a. 保证已安装了nodejs,并带有npm b.安装客户端命令行工具,grunt 主页都有详细步骤,注意的是安装命令行工具而不是服务器版本. npm install –g grunt-cli 安装完成后已经有了grunt,压缩css,js合并文件换需要grunt的插件,grunt只是一个平台,完成各种任务又对应的插件.Grunt的插件十分丰富目前又380个已帮助我们完成工作中的…

在你安装 Grunt.js 之前你需要先安装 Node.js.对于本教程而言,我已经安装好了 node.js v0.10.0. 我将要安装 Grunt.js v0.4.1.警告:如果你已经安装了 Grunt.js 0.3.x 或者更低的版本,请先卸载它. Grunt 的命令行界面 为了安装 grunt.js,我们需要要安装好全局的 Grunt 命令行界面(CLI),当前的 CLI 版本是 1.0.6.打开 Windows 命令窗口(CMD)并输入以下指令: npm install grunt-c…

第一次在Mac OS X上搭建前端开发环境,做一个小小记录,包括一些与windows系统的区别和常用快捷键 首先,在进行环境搭建之前先来看一下苹果系统的“cmd”,也就是Terminal(终端). 打开方式:百度经验 当然也可以在   “系统偏好设置 > 键盘 > 快捷键”中设置      找到终端并打开后我们就可以像在windows上使用cmd一样,用命令行做一些熟悉的操作了,以下就是终端界面                注:打开多个终端的方法 command+N 1.nodejs 安装…

1.Seajs库 解决开发中的冲突依赖等问题,提供代码可维护性. SeaJS 是由玉伯开发的一个遵循 CommonJS 规范的模块加载框架,可用来轻松愉悦地加载任意 JavaScript 模块和css模块样式. SeaJS 就两个核心:模块定义和 模块的加载及依赖关系. 官方网站 http://seajs.org 2.seajs如何使用?   主要有以下四个步骤: ①通过script引入sea.js的库 ②把js文件变成模块  –define ③调用模块  –exports ④加载模块  –se…

Gruntjs是前端项目构建工具,基于nodejs命令.有些js项目是基于Gruntjs构建的,如Jquery. Gruntjs主要功能有: 1.合并文件. 2.压缩html,js,css,图片文件. 3.语法检测. 4.单元测试. 5.watch功能. 本文主要介绍watch配合chrome浏览器插件LiveReload实现网页自动刷新功能. Nodejs安装 下载nodejs,官网地址 http://nodejs.org/ 下载最新版本按照提示下一步安装即可. Gruntjs的安装 Grun…

前言 近期用Grunt进行前端开发经常要用到的一些Grunt插件,用起来非常顺手. 一.package.json文件配置如下: 包括coffeescript编译为js,css加CSS3适配前缀,css合并,less样式编译为css,自动监视变化进行编译处理等等 { "name": "myApp", "version": "0.1.0", "description": "myApp", &…

先输入命令: npm install -g grunt-clinpm install grunt --save-devgrunt –version 新建json文件:package.json { "name": "my-project-name", //项目名称 "version": "0.1.0", //版本 "devDependencies": { //插件 "grunt": &qu…

grunt很强大,可以帮我我们解决很多繁琐的操作,虽然刚接触不久,但依然感受到其强大之处,这篇记录一下通过grunt.js实现事实刷新页面, 省去了编码 -> 保存 -> F5..F5..F5..F5...n多个F5操作. 首先看下项目目录: 然后来看package.json配置: { "name":"grunt-connect", "version":"0.1.0", "devDependencies&…

合并.压缩CSS资源文件用到了grunt-contrib-concat.grunt-css插件,自己npm就可以了,下面直接呈上package.json.Gruntfile.js代码 package.json代码如下: {   "name": "BeJS",   "version": "0.1.0",   "devDependencies": {     "grunt": "~…

简介:Grunt是基于Node.js的项目构建工具,对于需要重复执行的任务,例如压缩.编译.单元测试等,自动化工具可以减少你的工作量,使你的工作更轻松. 一:检测nodejs是否安装好,打开CMD控制器 出现以上情况,表示已经安装好了 二:Grunt安装 首先确保你已经正确安装了nodejs环境. 1.找到要使用Grunt的项目文件包 2.然后以全局方式安装Grunt: npm install -g grunt-cli 3.package.json文件 (1种).npm init命令会创建 (2…

前言 Grunt是一款前端构建工具,帮助我们自动化搭建前端工程.它可以实现自动对js.css.html文件的合并.压缩等一些列操作.Grunt有很多插件,每一款插件实现某个功能,你可以通过npm命名去下载插件,然后使用它们.关于grunt的使用以及配置,卤煮不打算在此介绍.本篇博文重点要讲的是如何快速开发一款自定义的grunt插件.因为卤煮在打包合并代码的时候发现了无法将html和js混合的文件进行压缩处理,为此卤煮也翻了很多资料,没查找到理想的解决方案.在山穷水复之时,硬着头皮自己开发了一个简…