grunt专题

JavaScript自动化构建工具grunt、gulp、webpack介绍

前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力。当今时代,前端工程师需要维护的代码变得及为庞大和复杂,代码维护、打包、发布等流程也变得极为繁琐,同时浪费的时间和精力也越来越多,当然人为的错误也随着流程的增加而增加了更多的出错率。致使每一个团队都希望有一种工具,能帮助整个团队在开发中能精简

Grunt插件之cssmin--ccs压缩与合并

本来想写一片比较完成的文章来介绍这个工具,但是查看github上的文档<<<传送门>>>,说明文档少的简直是可怜,姑且记下github上面的两个例子吧。 前面的步骤无非是安装grunt-cli,创建grunt项目等等事件,如果有不明白的请移步Grunt插件之uglify代码js代码压缩与合并 查看,这里只讲到Gruntfile.js的配置: css文件合并 module.exports =

Grunt插件之uglify--js代码压缩与合并

平时在开发项目的时候,都是在本地测试,加载代码都是走localhost,页面刷新基本是秒出,所以没有考虑js文件的大小。最近项目上线,部署到了服务器上之后,测试的时候发现加载速度特别慢,一查看网络,发现有的js文件加载时间居然超过1s。没办法,把代码压缩看看。果然压缩好之后加载快了很多。而将代码压缩和混淆之后,也能提高网站的安全性。 下面是使用grunt的uglify插件的安装和使用

Linux搭建(nodejs + grunt + compass) 开发环境

由于工作原因,需要写一些前端页面。有尝试用notepad++编辑,效率着实不高,感觉也挺low,于是网上查阅相关资料,结合一些自己的理解,动手搭建(nodejs + grunt + compass) 开发环境,从而简化提高开发效率。 工具安装 1.安装Nodejs   Grunt需要Nodejs的支持,所以我们先安装Nodejs。直接进入Nodejs官网 中根据自己的系统选择下载。我这里

前端打包工具的发展历程、思路(grunt,gulp,webpack,vite)

现在前端发展真快,需要学的东西太多了,下面总结下前端打包的发展过程,便于区分和选择学习。 什么是前端打包 前端打包是指将多个JavaScript文件、CSS文件、图片等资源进行合并和优化处理,并输出为一个或多个文件的过程。这样做的目的是减少页面加载时需要发起的HTTP请求数量,优化页面加载速度,提升用户体验。 发展阶段 手工合并阶段 最早期前端开发只有少量的JS和CSS文件。开发人员会手

SAPUI5 (37) - 使用 Grunt 实现 Cross Origin 代理

上一篇介绍使用 SAP Web IDE 代理来解决 Cross-origin 问题。如果使用 Eclipse 作为开发工具,可以使用 Simple proxy servlet 来测试,作为 cross-origin 的代理。但 SAP Web IDE 编写的代码,并不能在不做任何修改的情况下运行。为了能较好地实现代码移植,另外一个比较好的方法是使用 Grunt。Grunt 是基于 JavaScri

Grunt 合并编译less文件

Gruntfile.js 配置项: // 安装依赖// npm install -g grunt-cli// npm install --save-dev grunt// npm install --save-dev grunt-contrib-concat// npm install --save-dev grunt-contrib-less// npm install --save

Grunt打包GMU组件 报错处理

莫Q群的大神推荐移动GMU组件,GMU是基于zepto的mobile UI组件库,提供webapp、pad端简单易用的UI组件,官网:http://gmu.baidu.com/具有以下特点: 简单易用 轻量级 文档丰富,自定义下载 专业稳定 丰富实用UI组件 开源免费 基础版本中只实现了能通用的部分,而其他可能通用的部分都是通过插件的形式来扩展,需要为GMU组件量身定制了一套基于G

Grunt打包前端代码教程

详细教程 http://blog.csdn.net/wangfupeng1988/article/details/46418203/ 过程: 1.安装node.js 2.兴建 Grunt项目 包含: F:\App\grunt_test package.json: {"name": "grunt_test","version": "0.1.0"

grunt修行之路

看了一下grunt的教程真的很强大,功能也很全面,需要的功能都能找到,学习成本也很低, 里面的插件真的太方便,用uglify插件压缩js代码真的太实用了,而且轻轻松松配置,又 拾得一个新技能,前端还有好多东东要学啊,加油! 一个grunt教程,看完之后使用grunt应该就没什么问题了 原文链接:【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

grunt压缩js文件

参考链接 如果什么都没配置参考上面的链接 如果在公司已经有基本配置,如下 已经用npm install npm install -g grunt-cli 全局安装之后 只需要在build文件夹下,执行命令grunt compressJS,就能压缩到相应的min.js中 在gruntfile.js文件中查看min.js的文件名,去查看自己是否已经压缩好。 注意:提交js压缩之后提交,java

解决grunt-contrib-cssmin压缩默认会删除一些css hack的问题

最近在学习grunt,在用它的一个css压缩插件grunt-contrib-cssmin对以前项目的css文件进行压缩时,发现一些css hack会被删除,配置代码片段如下: cssmin: {     minify: {          expand: true,          cwd: srcName + '/',          src: ['*\*/\*.css', '!*.mi

Grunt配置

将命令行的当前目录转到项目的根目录下。 一般需要在你的项目中添加两份文件:package.json 和 Gruntfile。 3.package.json: 此文件被npm用于存储项目的元数据,以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件,放置于devDependencies配置段内。 Gruntfile: 此文件被命名为 Gruntfile.js

Grunt即学即用

http://www.html-js.com/article/Grunt-uses-Grunt-for-immediate-use 在这篇文章中,我们将探索如何在一个项目中使用Grunt来加快并改变你开发网站的方式。我们首先将简要的说明一下Grunt究竟是用来做什么的,然后再深入说明如何设置并使用Grunt中各式各样的插件来承担项目中各种繁重的任务。 其次,我们将看看如何创建一

给那些认为Grunt奇怪又难懂的人看的Grunt教程

http://www.html-js.com/article/Grunt-use-for-those-who-believe-that-the-Grunt-strange-and-difficult-to-see-the-Grunt-tutorial 前端工程师经常会被要求做下面这些事: 每次编写一小段CSS和JavaScript,然后在最后把它们拼接起来压缩你的CSS和JavaScr

windows全局安装grunt,yeoman,webpack等,在命令行输入grunt,yo,webpack提示不是内部或外部命令解决方法

这种情况有可能是环境变量没配置好导致的,找到grunt.cmd,yo.cmd,webpack.cmd等文件所在的路径,加入环境变量的PATH当中即可。 操作方法如下,右键我的电脑,点击属性->高级系统设置->在系统变量中找到Path,双击,点击新建,然后输入要添加的路径即可。

使用grunt压缩合并混淆JS脚本

fro from: https://www.cnblogs.com/sybboy/p/4831635.html 折腾一两天,终于学会使用grunt压缩合并混淆JS脚本,小激动,特意记录一下+spm一点意外收获 很长时间没有更新博客了,实在是太忙啦...0.0 ,以下的东西纯粹是记录,不是我原创,放到收藏夹还担心不够,这个以后常用,想来想去,还是放到这里吧,,丢不了..最后一句

【Grunt】Uglification failed.丑化失败(其实是打包失败),Grunt打包错误,

报错信息: SyntaxError:Unexpected token:punc(.) Uglifying source….. Uglification failed. Use –force to continue. Aborted due to warnings 截图如下: 我们看到Line 125036 in .tmp/concat/js/app.angular.js; 我们

我为何放弃Gulp与Grunt,转投npm scripts(下)

本文来源于我在InfoQ中文站翻译的文章,原文地址是:http://www.infoq.com/cn/news/2016/02/earlgrey-ios-functional-ui-test Cory House是“Building Applications with React and Flux”与“Clean Code: Writing Code for Humans”的作者,

我为何放弃Gulp与Grunt,转投npm scripts(中)

本文来源于我在InfoQ中文站翻译的文章,原文地址是:http://www.infoq.com/cn/news/2016/02/gulp-grunt-npm-scripts-part2 Cory House是“Building Applications with React and Flux”与“Clean Code: Writing Code for Humans”的作者,同时也是Plural

我为何放弃Gulp与Grunt,转投npm scripts(上)

本文来源于我在InfoQ中文站翻译的文章,原文地址是:http://www.infoq.com/cn/news/2016/02/gulp-grunt-npm-scripts-part1 Cory House是“Building Applications with React and Flux”与“Clean Code: Writing Code for Humans”的作者,同时也是Plur