shell命令:mv a b   将文件a改名为b, 可如果b已经存在,比如/test文件下有a和b两个文件,执行mv a b后,b被覆盖的了.也就是/test文件下只有a. 但是mv命令在pig的grunt中使用有问题,执行不稳定. pig编程指南中说,除了cd和pwd两个命令,其他命令不推荐使用. 在我测试后,确实如此,如果存在b文件,那么mv a b可能不被执行. 但是可以先rm b,然后在mv a b就可以执行了 我是因为在pig 脚本中涉及文件操作,所以在pig脚本中使用pig she…

/** * 需要用到的文件夹有 js(src) css image html */ gulp是一种自动化构建工具,可以增强我们的工作流程,他是基于 Node.js 构建的,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数 //1.引入 js的压缩 npm install grunt-contrib-uglify --save-dev grunt.loadNpmTasks("grunt-contrib-uglify"); //css的压缩 npm install grunt-…

这是什么 这是一个帮助前端开发工程师将css代码中的切片合并成雪碧图的工具,它的主要功能是: 使用二叉树排列算法,对css文件进行处理,收集切片序列,生成雪碧图 在原css代码中为切片添加background-position属性 生成用于高清设备的高清雪碧图,并在css文件末尾追加媒体查询代码 在引用雪碧图的位置打上时间戳 在样式末尾追加时间戳 安装依赖 grunt-sprite 使用 spritesmith 作为内部核心算法,根据官方文档中提到的基本依赖,须要安装Graphics Magic…

1.使用jshint进行代码检查时,grunt命令后报错: 因为出现了乱码,我猜测是因为编码原因导致的.遂在webstorm的setting中修改了编码为utf-8,问题解决.…

项目中一些很老的技术需要运用webpack管理,这时候必须使用grunt+webpack 配合使用 .做个笔记,不限多说直接上代码 grunt结合webpack 下面是 Gruntfile.js const path = require('path') const fs = require('fs'); const webpack = require("./webpack.config.js"); const destuglifyls = ['dest/limsStyle/equati…

Photoshop 切出的图片,无论是 PNG 还是 JPEG/JPG 格式,都含有许多相关信息,又或多余的颜色值,这些信息和颜色值,对网页前端并没有用处,反而增加图片大小,所以 Google Pagespeed 最佳实践建议我们用 jpegtran 或 jpegoptim (仅限 Linux 平台) 对 jpeg/jpg 图片进行无损压缩,如果是 PNG 格式,则使用 OptiPNG 或 PNGOUT 压缩.减小图片大小,就可以减少用户下载的文件大小,加快页面访问速度. 不过上面提到的几个工具…

Protractor是专为AngularJS应用程序编写的UI自动化测试框架.前端构建有很多构建工具,比如Grunt.Gulp等.一般我们会把这些构建工具作为集成集成的脚本执行工具.所以如果把Protractor的执行也集成进去,则可以达到自动验证UI功能的效果. 本文将介绍如何将Protractor命令集成到Grunt task中. 首先需要为Grunt安装一个插件,grunt-protractor-runner.这个插件会帮你在Grunt中运行Protractor. 1 npm instal…

原文链接:https://medium.freecodecamp.com/why-i-left-gulp-and-grunt-for-npm-scripts-3d6853dd22b8#.n7m1855uf 作者:Cory House ------------------------------------------------------------------------------------------------------------------------------ 我知道你在想…

用grunt前,需要先安装nodejs.因为grunt依赖于nodejs.nodejs的安装可以参照我的博客里头的nodejs的下载,安装与测试.   第一步:安装grunt-CLI 注意你的电脑要联网,不然不能安装. “CLI”被翻译为“命令行”.要想使用grunt,首先必须将grunt-CLI安装到全局环境中,使用nodejs的“npm install -g grunt-cli”进行安装. 这个时候有个转动的小横线,表示正在联网加载.文件比较小一般比较快.加载完之后你会看到这个界面.    …

grunt vs gulp 虽然gulp已经出来很久了,但是一直没有去使用过.得益于最近项目需要,就尝试了一下,以下从几个要点讲一下grunt和gulp使用的区别,侧重讲一下在使用gulp过程中发现的问题.而两种工具孰优孰劣由读者自己判断. 1. 书写方式 grunt 运用配置的思想来写打包脚本,一切皆配置,所以会出现比较多的配置项,诸如option,src,dest等等.而且不同的插件可能会有自己扩展字段,导致认知成本的提高,运用的时候要搞懂各种插件的配置规则.gulp 是用代码方式来写打包脚…

前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为庞大和复杂,代码维护.打包.发布等流程也 变得极为繁琐,同时浪费的时间和精力也越来越多,当然人为的错误也随着流程的增加而增加了更多的出错率.致使每一个团队都希望有一种工具,能帮助整个团队 在开发中能精简流程.提高效率.减少错误率.随之讨论自动化部署也越来越多,并且国内很多大型团队也都有自己成熟的自动化部署工具.据我所知,百度有 FIS,腾讯有Modjs,360有燕尾服,还有很多团队在使用Ant,Sh…

开始使用Grunt 大多数开发人员都一致认为,JavaScript开发的速度和节奏在过去的几年里已经相当惊人.不管是Backbone.js和Ember.js的框架还是JS Bin社区,这种语言的发展变化不仅提高我们网站的用户体验,而且我们也在开始使用他们. 当您在使用JavaScript,您可能需要定期执行多个任务.虽然这在大多项目中都存在,但切实是一个耗时的和重复的工作方式.在这样一个活跃的社区,你会假设工具都可以自动化,加快这个过程.此时就出现了Grunt. 什么是Grunt 建立在Node…

最近使用了很多 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…

RequireJs 提供了一个打包工具 r.js,可以将相关的模块打包为一个文件.相关说明:http://www.requirejs.org/docs/optimization.html 将相关的脚本模块整合为单个脚本文件,然后默认使用  UglifyJS 进行紧缩,或者在使用 java 的时候,使用  Closure Compiler 处理. 还可以通过 @import 自动内联相应的样式,并且删除注释来优化 CSS 虽然可以通过命令行来使用这个打包工具,但是在 Grunt 中也提供了相应的插…

前端开发环境准备好了,我们准备开始进行开发. 前端开发的主力语言是 JavaScript,这是一种脚本语言,没有编译器,也就没有了编译器带给我们的语法检查,怎样保证代码的质量呢?jshint 是一个强大的工具. 1. 概要说明 官方地址:http://jshint.com/ GitHub 地址:https://github.com/jshint/jshint JSHint 是一个使用 JavaScript 编写的 JavaScript 的代码质量检查工具,主要用来检查代码质量以及找出一些潜在的代…

在前端开发过程中,我们需要在开发过程中,将开发中的站点部署到服务器上,然后,在浏览器中查看实际的效果,在 Grunt 环境下,可以直接使用集成在 Grunt 中的 Connect 插件完成站点服务器的支持,在开发过程中,直接查看效果. 1. Connect 资源 与 Grunt 集成的 Connect 可以在 GitHub 上找到,地址:https://github.com/gruntjs/grunt-contrib-connect 安装的时候,直接通过 NPM 就可以,不用自己下载.执行下面的…

GitHub地址:https://github.com/MrLeo/SeaJS 目录结构 目录结构说明 web存放HTML文件 static存放所有HTML需要用到静态资源文件(css.js.img-) module存放HTML对应的业务模块 common存放与业务无关的模块 Get Start 准备工作 安装 Node.js 及 npm 安装 grunt-cli (允许安装多版本grunt) $ npm install -g grunt-cli 用命令行进入到项目所在目录 $ cd /d F:…

安装过程 安装nodejs 安装grunt,bower,yoeman 命令:(-g 表示全局安装,否则安装到当前目录下) npm install -g grunt-cli npm install -g yo npm install -g bower 删除已安装: npm unintall -g yo yoman -- "脚手架" 针对不同web工程,安装相应yoman"脚手架"生成器,eg:angular工程 npm install -g generator-ang…

认识Grunt Grunt中文文档 安装Node环境 CNode 配置Grunt Grunt中文文档-配置任务 什么是package.json package.json中文文档 关于Grunt资料 应用Grunt自动化地优化你的项目前端 Grunt打造前端自动化工作流 Grunt 自动化部署之css.image.javascript.html压缩Gruntfile.js配置 [grunt第一弹]30分钟学会使用grunt打包前端代码 [grunt第二弹]30分钟学会使用grunt打包前端代码(0…

Grunt的配置和使用(一) Grunt 和 Grunt 的插件都是通过 Node.js 的包管理器 npm 来安装和管理的.为了方便使用 Grunt ,你应该在全局范围内安装 Grunt 的命令行接口(CLI).要做到这一点,你可能需要使用 sudo (OS X,*nix,BSD 等平台中)权限或者作为超级管理员( Windows 平台)来运行 shell 命令. npm install -g grunt-cli 使用全局安装之后,可以在任何一个目录中运行 grunt 命令. 如何工作 每次运…

前端开发 Grunt 之 Connect 在前端开发过程中,我们需要在开发过程中,将开发中的站点部署到服务器上,然后,在浏览器中查看实际的效果,在 Grunt 环境下,可以直接使用集成在 Grunt 中的 Connect 插件完成站点服务器的支持,在开发过程中,直接查看效果. 1. Connect 资源 与 Grunt 集成的 Connect 可以在 GitHub 上找到,地址:https://github.com/gruntjs/grunt-contrib-connect 安装的时候,直接通过…

第一步:安装brew 打开http://brew.sh/登陆brewhome官网,上面有安装命令. 第二步:安装node 第一步安装成功后,命令行输入 brew install node 第三步:安装grunt 第二步安装结束后,命令行输入 npm install -g grunt-cli 第四步:安装grunt插件 将准备好的Gruntfile.js 和 package.json 放在要进行的项目目录下: 先输入 cd+空格,将项目文件夹拖入命令行,enter执行: 命令行输入 npm ins…

在前端开发过程中,我们需要在开发过程中,将开发中的站点部署到服务器上,然后,在浏览器中查看实际的效果,在 Grunt 环境下,可以直接使用集成在 Grunt 中的 Connect 插件完成站点服务器的支持,在开发过程中,直接查看效果. 1. Connect 资源 与 Grunt 集成的 Connect 可以在 GitHub 上找到,地址:https://github.com/gruntjs/grunt-contrib-connect 安装的时候,直接通过 NPM 就可以,不用自己下载.执行下面的…

初学grunt 压缩,做个记录.备忘. [JS压缩] 先比较yui compressor 与 uglify  代码压缩, yui compressor,使用起来很简单.需要jdk. https://github.com/yui/yuicompressor/releases 使用方式 //压缩js java -jar yuicompressor-2.4.8.jar --type js --charset utf-8 -v jquery-ui.js > jquery-ui.min.js //压缩cs…

grunt已经扯了七篇了,殊为不易.最后一篇扯点早应该提及的东西,就是module.exports = function(grunt) {}传入的这个grunt.之前的代码grunt一般只出现在Gruntfile.js这几个地方. require('load-grunt-tasks')(grunt); require('time-grunt')(grunt); grunt.initConfig({ ... }); grunt.registerTask('default', [...]); 但gr…

上一回没有说完,我就是这样,做之前心中波澜壮阔,锦绣山河,等画完小草开始烦躁,完成鲜花出现动摇,然后心神涣散,最后虎头蛇尾. 现在弥补下之前遗漏的问题. watch(V0.6.1)的tasks和options(github地址) watch和之前介绍的plugin有几点不同,首先files的值不是原来对象数组的形式,而是监听的文件的路径的字符串数组.其次,其他plugin的task结构为target+options,watch多一个属性类型,叫tasks,是监听的文件变动后需要执行的任务队列.目…

在使用seajs时,常常将若干脚本分为多次require进来,这样开发中比较方便,但是,会增加http请求次数,在生产环境中需要进行打包合并.压缩等操作. 以Grunt构建工具为例,对一个seajs项目打包: 普通的项目,直接对脚本进行合并.压缩接口,但是seajs中会涉及到动态引入的依赖脚本,需要对依赖的脚本也进行合并压缩操作. 具体思路是: 一般在使用define定义一个模块时,通常省略了moduleID标识的声明,而且seajs是依赖后置的,根据需要随时引入依赖脚本,所以依赖信息在定义的也…

grunt的插件机制 task.loadNpmTasks = function(name) { var root = path.resolve('node_modules'); var tasksdir = path.join(root, packagename, 'tasks'); //加载grunt 插件的tasks if (grunt.file.exists(tasksdir)) { loadTasks(tasksdir); } else { grunt.log.error('Local…

Nodejs+Grunt配置SASS项目自动编译 早前听说Nodejs和Grunt很强大,特别是用来构建自动化的前端开发,更是强大无比.但一直碍于自己掌握的技术有限,不敢深入,也未曾深入下去.最近在开始学习SASS,也慢慢的接触这方面的东西.为了能更好的让SASS项目实现自动化编译,打算使用Nodejs和Grunt来试试. SASS的编译的话题,在<SASS编译>有进行过介绍,文中介绍的方法是在Ruby环境下,使用sass命令配合其各种不同的参数来实现SASS的编译.那么今天我们换过一种方式,…

在前端工程化系列[02]-Grunt构建工具的基本使用和前端工程化系列[03]-Grunt构建工具的运转机制这两篇文章中,我们对Grunt以及Grunt插件的使用已经有了初步的认识,并探讨了Grunt的主要组件以及它的运转机制,这篇文章是Grunt使用的进阶教程,主要输出以下内容: ❏  Grunt项目的自定义任务❏  Grunt任务的描述和依赖❏  Grunt多目标任务和选项❏  Grunt项目任务模板配置❏  Grunt自动化构建和监听 3.1 Grunt自定义任务 在使用Grunt的时候,…