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

在吉特仓储管理系统开发的过程中大量使用到了JS,随着JS文件的增多我们需要对JS进行有效的管理,同时也要对JS文件进行一些压缩.文本用于记录一下使用grunt压缩JS的操作步骤,便于遗忘之后记录查找,文章内容非常浅显. 一. 什么是grunt JavaScript世界的构建工具,官网上是这么描述的,姑且这么描述,个人感觉还比较好用.官网地址: http://www.gruntjs.net/  更多的参考资料也可以查询官网 二. 安装grunt Grunt和Grunt插件是通过npm安装并管理的,

module.exports = function(grunt){ //1.引入 grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-htmlmin'); //2.设置任务: grunt.initConfig({ // //压缩CSS cssmin:{ yasuo:{ options:{ mangle:false }, expand: true, cwd: 'css',//压缩那个文件夹里的文

grunt是node中很好的管理项目的工具,利用它可以实现对整个项目的管理,避免很多重复性的工作如合并.压缩,检查语法等. 使用grunt首先要安装node环境,nodejs官网http://nodejs.org/可以选择下载合适的node版本. 安装nodejs成功后进行grunt安装.(示例为windows版本nodejs) nodejs 0.6版本以上自动安装了npm包管理工具,如果你的nodejs版本在0.6以下请下载安装npm包管理器. 安装npm成功后,安装 grunt-cli  (

安装node.js的环境和grunt插件在上一篇已经将过,点击这里跳到上一篇 所以我们直接从压缩插件的安装开始讲 起 1.安装uglify插件 目录结构如下: 命令行:npm install grunt-contrib-uglify 安装完后我们的node_modules下面就多了一个文件夹 2.配置Gruntfile.js文件 如下配置就可以压缩所有js文件,压缩后的文件名为原名 module.exports = function (grunt) { grunt.initConfig({ pk

一.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文件等

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

很长时间没有更新博客了,实在是太忙啦...0.0 ,以下的东西纯粹是记录,不是我原创,放到收藏夹还担心不够,这个以后常用,想来想去,还是放到这里吧,,丢不了..最后一句废话,网上搜集也好原创也罢,能解决问题不糊弄人才是真道理! 反正我的问题解决啦!!!哈哈哈!! 安装grunt 原文:www.bluesdream.com/blog/windows-installs-the-grunt-and-instructions.html 怕这个网址打不开,记录下: 安装Grunt:如果你之前安装过老的0.

压缩前的工程目录: 1.安装js,css需要的插件 使用npm安装:npm install grunt-contrib-uglify --save-dev  -------->安装js压缩插件 npm install grunt-contrib-cssmin --save-dev  -------->安装css压缩插件 手动安装后,在package.json文件里,会自动将“grunt-contrib-uglify”加入,并且是当前grunt-contrib-uglify的最新版本,就如下面的

js,css 文件合并与压缩 Grunt 是前端自动化构建工具,类似webpack. 它究竟有多强悍,请看它的 介绍. 这里只演示如何用它的皮毛功能:文件合并与压缩. 首先说下js,css 合并与压缩的好处: 减少 HTTP 请求次数: 节省带宽流量: js 压缩把代码混淆后可看性降低,带来一定安全性: 1. 安装Grunt Grunt 是运行在 Node.js 平台上,先要 安装 Node.js, 然后 安装 Grunt npm install -g grunt-cli 2. 使用Grunt

引用:https://www.jianshu.com/p/08c7babdec65 压缩 js 文件 1.创建一个目录 名为grunt   目录.png 2.在grunt目录下创建一个 src目录,存放我们要压缩.合并的js文件.   图片.png 3.创建package.json文件   文件.png package.json文件,包含了项目的一些信息,如项目的名称.描述.版本号.依赖包等. package.json文件中的内容如下: { "name": "grunt&qu

前段时间因为项目中的报表写了一个Jquery插件,开源到github上,参考以往大神们写的插件的姿势,决定搞了像模像样一点.言归正传.前端工程师对这些工具:Node,bower,grunt,npm这些工具应该都很熟悉.今天就简单介绍一下grunt的用法. grunt的介绍及安装请看着:getting-started,中文文档,写的也比较详细. 一个完整grunt项目小包含以下模块或配置文件 npm:node的包管理器,管理(安装)相关插件 grunt-cli:执行grunt任务的工具,但是注意安

今天我们来说一下用Grunt来压缩图片和JS吧! 首先要安装插件: 这是压缩图片的; npm install --save-dev gulp-imagemin 这是压缩JS的: npm install --save-dev gulp-imagemin 然后引入依赖: var gulp = require("gulp"); 在引入插件: var imagemin = require('gulp-imagemin');//压缩图片 var uglifyJS = require('gulp-

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

一.故事总有其背景 年末将至,很多闲适的时间,于是刷刷微博,接触各种纷杂的信息——美其名曰“学习”.运气不错,遇到了一个新名词,uglifyjs. 据说是用来压缩JS文件的,据说还能优化JS,据说是基于node的,还据说比Google Closure Compiler更带感,哦?激起了我的好奇心.百之谷之,哟,相关的介绍还不少.然后折腾了个把小时,基本上知道了是个怎么回事. 我觉得吧,还是有些用的,即使是不是从事node开发的人,抽个小空,share之,于是就有了本文.人总有浮躁的时候,我也不例

初学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压缩cCSS是和HTML的!但是不知道为什么,今天再一看.迷之消失了! 没办法.只好今天在写一次,从头开始!首先.我来介绍一下为什么要用构建工具.让我来一个官方的回答: 一句话:就是自动化,对于需要反复的任务,例如压缩,编译,单元测试.linting等,自动化工具可以减轻你的劳动,简化 你的工作.当你在Gruntfile文件确定配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作. 下面咱们来快速入门一下: Grunt和G

类似于grunt,都是基于Node.js的前端构建工具.不过gulp压缩效率更高. 工具/原料 nodejs/npm 方法/步骤 首先要确保pc上装有node,然后在global环境和项目文件中都install gulp npm install gulp -g   (global环境) npm install gulp --save-dev (项目环境)     在项目中install需要的gulp插件,一般只压缩的话需要 npm install gulp-minify-css gulp-con

Sass安装(mac) $ sudo gem install sass scss编译成css文件 $ sass ui.scss ui.css CLI安装 $ npm install -g grunt-cli Grunt安装 $ npm install grunt Grunt入门 package.json { "name": "my-project-name", "version": "0.1.0", "devDepe

最近做的前端项目中发现引用的js包太多,导致页面加载时反应很慢,所以首先想到的是将js和css压缩,提高加载速度. 我们先来看看抓到的当前页面响应时间: 页面异步加载,需要响应时间 7.41秒,这也太慢了,实在受不了了. 下面我们引入gulp 对js做压缩,gulp是基于Node.js的前端构建工具.所以首先需要安装nodejs ,因为我的项目本身就是node项目,所以直接装gulp就好.全局安装gulp,命令如下 npm install -g gulp 需要安装的依赖项下面这些,依次安装就好了