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

http://gruntjs.com/pluginshttp://gruntjs.com/getting-startedhttp://gruntjs.com/configuring-tasks#globbing-patterns     1.安装node.js 2.cmd   敲命令行: 查看node版本 node -v      ,查看node插件管理器  npm -v   查看 3.百度  cnpm 淘宝   ,安装nodejs插件管理器$ npm install -g cnpm --reg…

最近使用了很多 Grunt 插件,这里把使用 Grunt 中涉及的从开发.代码检查.单元测试.E2E 测试,直到发布所涉及的插件,做一个比较完全的汇总. 环境搭建 1. 创建 Web 前端开发环境 2. Grunt 之通配符 3. Grunt 之动态文件路径 grunt 源码分析 1. grunt源码解析:整体运行机制&grunt-cli源码解析 grunt 插件 1. Grunt 之 Connect 2. Grunt 之 watch 和 livereload 3. Grunt 之 使用 Jav…

创建 grunt 插件 准备工作:(node/npm/git 安装,在此不做赘述) yeoman generator 可以自动生成一个插件模板. 安装 yo npm install -g yo 安装 generator npm install -g generator-gruntplugin 开始创建插件: mkdir ~/grunt-swig-template cd ~/grunt-swig-template yo gruntplugin 书写插件 发布 执行npm init,系统会提示你输入…

http://www.jb51.net/article/70415.htm    含Grunt系列教程 这篇文章主要通过两种方案详解Grunt插件之LiveReload实现页面自动刷新,需要的朋友可以参考下 方案一:grunt-livereload + Chrome Plug-in 优点:安装.配置简单方便. 缺点:需要配合指定的浏览器插件(Firefox也有相关插件,IE么你懂的). 1. 需要安装2个插接件:grunt-contrib-watch.connect-livereload 执行命…

一个简单的 grunt 插件, 作用是 把 css 文件中的  /images/  替换成指定的  url path, 以实现 图片 cdn 路劲改造 插件项目文件结构 grunt-contrib-staticpath |--tasks |----staticpath.js |--package.json package.json { "name": "grunt-contrib-staticpath", "version": "1.0…

之前调试grunt插件时,都是通过人肉打log来调试.不仅效率低,而且会产生一堆无用的代码.于是简单google了下node断点调试的方法,总结了下. 借助node-inspector,我们可以通过Chrome浏览器的调试工具来调试. 一.安装node-inspector npm install -g node-inspector 二.监听Nodejs的debug调试端口 node-inspector & 见到输出下面log,http://127.0.0.1:8080/debug?port=58…

配置文件下载  http://vdisk.weibo.com/s/DOlfks4wpIj LiveReload安装前的准备工作: 安装Node.js和Grunt,如果第一次接触,可以参考:Windows下安装Grunt的指南和相关说明,根据步骤操作,创建完package.json 和 Gruntfile.js这2个文件就行. 接下来,开始配置LiveReload所需要的环境和相关插件.这里所提供的有两种安装方案,根据自己需求进行选择. 方案一:grunt-livereload + Chrome…

最近利用Electron来创建跨桌面应用的趋势似乎很火.看了几个用Electron开发的应用,这些应用在windows下面的安装方式,都是类似一个绿色软件的安装方法,下载.zip->解压到相应目录->进入文件夹点击exe使用.这种安装方法有两个缺点,第一,更新繁琐,用户需要删除之前的软件目录,下载新的软件,在跑一遍解压流程,不然电脑里面就会出现两个软件,不好区分.第二,安装之后无法自动创建快捷方式,需要手动进入目录右键创建.第三,没有自定的图标跟名称,没有那么酷了有木有! 之前我的文章Elec…

字蛛插件:压缩与转码静态页面中的 WebFont 需要注意的是,目前只支持 grunt@0.4.1 package.json { "name": "fontS", "version": "1.0.0", "devDependencies": { "grunt": "^0.4.1", "grunt-contrib-copy": "^1.0.…

苦B的前端每次在制作和修改页面时,都有一个特定的三部曲:coding-save-F5.很多时候都希望自己一改东西,页面就能立刻显示,而现在LiveReload就能做到这点. LiveReload会监控你指定的目录中文件,如果有文件被更改,它就自动触发浏览器刷新页面.但如果你修改的是CSS或者图片,页面内容会即时 更新,无需重新加载.这样我们不用每次修改文件后,都要去按下F5刷新页面,而是直接就能显示,有点类似所见即所得的编辑模式,特别适合使用双屏 coding的人.另外同时结合Sublime t…

第一步: 先生成插件模板: 利用命令生成, 首先通过github工具获取gruntplugin模板文件: 第二步: 了解plugin/tasks/taskName.js的registerMultiTasks下的一些默认的对象,比如获取: Gruntfile下grunt.initConfig下任务插件: taskName: { dist: { //知道这里的数据怎么获取 //以前grunt在这个节点下,或其他内置节点的一些内置属性字段的获取方式 } } 第三步: 了解插件调用的方式: 上面有写 :…

Gruntfile.js里面配置: module.exports = function(grunt){ // 项目配置 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'//添加banner }, b…

首先: Npm adduser User: xxxx Password: yyyy Email: glootz@gmail.com 进入到插件根目录下: Npm publish即可 Package.json名称要为英文及数字, 只能小写 名称可以随便改; 在没有addUser时,会有很多问题输出. Github工具  使用: 进入某个驱动磁盘: Cd /e Ls查看当前目录列表(文件/文件夹): Git init Git add . #[注意后面小点] 表示索引所有的文件 Git add REA…

下述给出了经常使用Grunt插件,并列举了部分插件演示样例: 插件名称 说明 Github地址 grunt-contrib-clean 清空文件和目录 https://github.com/gruntjs/grunt-contrib-clean grunt-contrib-copy 拷贝文件和目录 https://github.com/gruntjs/grunt-contrib-copy grunt-contrib-concat 连接.合并文件 https://github.com/gruntj…

创建插件 创建插件主要有以下几个步骤: (1)通过 npm install -g grunt-init 命令安装 grunt-init .(2)通过 git clone git://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin 命令安装grunt插件模版.(3)在一个空的目录中执行 grunt-init gruntplugin .(4)执行 npm install 命令以准备开发环境.(5)为你的插…

听说过Grunt也有两年了,用了也有两年了,然而都是在别人搭好的架子上做开发,当想要对前端工程化整体把控时就一脸懵逼了! Grunt是什么? Grunt是一套web前端工程化构建工具.(ps:关于Grunt的好处及安装网上教程一大堆,这里就不熬述了) 为什么说Grunt是一『套』工具呢,因为它提供了丰富的官方插件和第三方插件供开发者使用,开发者可根据项目需求灵活引用适合的插件,从而实现前端工程自动化的整体构建. Grunt和Grunt插件都基于nodeJs环境运行,Grunt的插件是基于npm来…

在不久前我曾写了一篇 应用r.js来优化你的前端 的文章,为大家介绍了r.js这个实用工具,它可以很好地压缩.合并前端文件并打包整个项目.但是如果将r.js放到项目中,我们不得不顾及到一个问题——项目每维护一次,就需要维护的人员输入一次rjs运行口令重新打包项目,自然是非常繁琐的事情.另外如果我们的项目用sass来写样式,可能还得外开一个koala.如果我们能让项目自己处理自己的所有事宜,那一切就美好多了. 针对上述问题,今天我们就利用更为大众的工具——Grunt,来自动化地处理前端事务(其实r…

最近着手开发一个新项目,打算从工程化的角度整理一套自己的前端开发.发布体系. grunt这些工具,之前别人用我也用,并没有认真想过它们的前世今生,正好趁着这个机会,我来理一理目前业界比较流行这些工具的用处和相互关系. 一.名词解释 nodejs——可以在本地执行js代码的环境(类似java的jdk)npm——nodejs程序包的管理和分发工具grunt——运行在nodejs上的,基于任务的,项目构建工具 (npm+grunt≍java里的maven) 我的理解是,以web前端项目构建为例:   …

打包的目的和意义就不用叙述了直接上干货 http://www.gruntjs.net/getting-started里面的教程也太简单了,需要下一番功夫去研究才行.本文将grunt打包的常用方法都用实例描述,更加清晰易懂. 1.    第一个简单的grunt打包 1)需要安装nodejs:http://www.cnblogs.com/chuaWeb/p/nodejs-npm.html 本人的nodejs工程目录为F:\chuaNodejs(后续所有相对路径都是相对于这个目录) 2)命令行到nod…

1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs,就去安装吧.安装nodejs非常简单,完全傻瓜式.下一步下一步下一步.的安装方式,这里不再赘述.去 https://nodejs.org/ 上,点击页面中那个绿色.大大的“install”按钮即可.我这儿在百度云盘存放一个,需要的点击下载 安装了nodejs之后,可以在你的控制台中输入“node -…

快速入门 Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用.:奇数版本号的 Node.js 被认为是不稳定的开发版. 在安装 Grunt 前,请确保当前环境中所安装的 npm 已经是最新版本,执行 npm update -g npm 指令进行升级(在某些系统中可能需要 sudo 指令). 如果你已经安装了 Grunt,现在需要参考一些文档手册,那就请看一看 Gruntfil…

1.准备工作 1)首页确保电脑上网,以及能够访问https://registry.npmjs.org/,因需从此网站中下载安装相应的插件; 2)电脑安装Node.js,Grunt及Grunt插件都是基于node.js运行的:如果你电脑上未装node.js,到nodejs官网https://nodejs.org/下载相应版本安装吧: 3)安装grunt-CLI,要想使用grunt,需要将grunt-CLI安装到全局环境中,使用nodejs的”npm install”进行安装: 打开控制台(wind…

jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过.但是不会熟练使用grunt,那你就真的真的真的out了(三个“真的”重复,表 示重点).至于grunt的作用,这里不详细说了,总之你如果做web前端开发,你一定要用grunt.还有一点,它完全免费,没有盗版.既强大又免费的 东西,为何不用? 当然了,你如果你能找到更好的替代grunt的其他工具也是…

grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学,有误请包涵 准备阶段 1.nodeJs环境 因为grunt是基于nodeJs的,所以首先各位需要安装nodeJS环境,这块我们便不管了http://www.cnblogs.com/yexiaochai/p/3527418.html 2.安装grunt 有了nodeJs环境后,我们便可以开始搞grun…

前言 上一篇博客,我们简单的介绍了grunt的使用,一些基础点没能覆盖,我们今天有必要看看一些基础知识 [grunt第一弹]30分钟学会使用grunt打包前端代码 配置任务/grunt.initConfig 前面我们简单的介绍了grunt相关的知识,这里我们这里还需要再熟悉下Gruntfile相关的知识点,比如说配置任务 grunt的任务配置都是在Gruntfile中的grunt.initConfig方法中指定的,这个配置主要都是一些命名性属性比如我们上次用到的合并以及压缩的任务配置: grun…

前言 前段时间做了一个项目,前端开发页面,然后把代码给到后端同学,后端同学通过vm再来渲染页面.后来才发现,这种方式简直是太low了,因为前端代码在服务端同学那里,每次前端需要更改的时候都需要去到服务端同学那里修改代码,维护成本高,卖力不讨好＝＝ 工作了这么久,深深的感受到了那句名言的魅力,时间就是金钱呀!后来我发现,现在的web开发,谁还用这种低级的方法,大家都已经开始搞前后端分离了! 前后端分离的目的和作用 要弄清前后端分离的目的和作用,首先要知道什么是前后端分离. 现在的web前端越来越偏…

一.什么是grunt? 是基于nodejs的项目构建工具,grunt和grunt插件是通过npm安装并管理的,npm是node.js的包管理器 二.为什么要用grunt? 自动化.对于反复重复的任务,例如压缩.编译.单元测试等,自动化工具可以减轻你的劳动,简化你的工作 三.如何使用? 1.首先安装nodejs,安装包及源码下载地址:https://nodejs.org/en/download/. 2.安装grunt,需要先将grunt命令行(CLI)安装到全局环境中, npm install -…

grunt的安装 npm intall -g grunt-cli 新建文件夹grunt,在本地文件中添加package.json和Gruntfile.js文件,其中package.json文件的配置如下 //package.json { "name": "grunt", "version": "0.1.0", "description": "demo", "license&qu…

什么是Grunt? grunt是javascript项目构建工具,在grunt流行之前,前端项目的构建打包大多数使用ant.(ant具体使用 可以google),但ant对于前端而言,存在不友好,执行效率低,学习成本高的问题.所以最近几年对于前端构建工具--grunt就应运而生. Grunt能做什么呢? 按任务目标大致可分为四类:   1. 文件操作型:比如合并.压缩js和css文件等(包括). 2. 预编译型:比如编译less.sass.coffeescript等. 3. 类库项目构建型:比如…