应用Grunt自动化地优化你的项目前端

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

针对上述问题,今天我们就利用更为大众的工具——Grunt,来自动化地处理前端事务(其实rjs也是使用了Grunt的concat和uglify等插件)。

我们依旧使用一个非常简单的、名为before的项目(你可以在我的Github下载这个案例)来作为示例,它是一个很纯净的项目,还没有使用任何前端工具对其进行操作:

你可以试着运行根目录下的index.html文件,它会显示一张幻灯片。

接下来我们将在before项目上使用Grunt自动化前端事务。

操作需求

由于Grunt是运行与node上的,故要求你的电脑安装了nodeJS(点我下载);

由于我们这边使用了sass来写样式,故要求你的电脑安装了Ruby(注意Mac是默认安装有Ruby的,如果是Windows或其它系统请点此下载安装)。

安装时建议把三个可以勾选的选项都勾上(特别要勾选上第二个,这样才会添加环境变量),安装后点击 “所有程序” -  “Ruby.13...” -  “start command prompt with Ruby”,打开Ruby命令行界面并输入指令:

gem install sass

注意该指令必须要在FQ的情况下才执行,不然可能会导致无法安装sass的错误:

另外,我们后续编译sass的时候,若.scss文件中存在中文注释,Ruby可能会因为识别不了中文编码而导致出错。不过解决方法很简单,点击此处查看

安装GRUNT CLI

我们打开 Node.js command prompt 进入node命令行界面:

在命令行界面输入以下代码并回车运行,此举是安装Grunt全局命令行,从而我们可以在电脑任何位置调用grunt命令语句:

npm install -g grunt-cli

Grunt配置

Grunt的入门其实可以参考官方入门,虽然这篇官方指引写的很烂,却也告诉我们,Grunt配置离不开两个文件—— package.jsonGruntfile.js ,我们一般都把它们放置在项目根目录上 。

其中 package.json 作用是记录项目的名称(随便起个名字就行)、版本号(随便起个数字串就行)和插件依赖,创建package.json完全不用手动,我们只需要把node命令行定位到项目下(假设我们把上述的before项目放在E盘),然后输入以下指令并回车执行,便会在项目根目录自动创建一个初始化的 package.json 文件:

npm init

回车后node会问你若干个问题,包括项目名啊版本号啊什么有的没的,你有心情可以写一写,没心情就一路按回车下来即可:

这时你会发现根目录下就这样多了个叫package.json的文件:

里面有node帮我们预先定义好的json代码。不过我各人并不喜欢使用 npm init 这种婆妈的形式来自动生成package.json,还不如自己手动创建一个package.json,并输入简洁的代码:

{
  "name": "before",
  "version": "1.0.0"
}

是的,初始化咱只要就这么俩行即可,其实我甚至希望能简短到只有 {  } 即可。可惜 name 和 version 对于 package.json 来说是非常重要的俩个属性,缺一不可(可以查看这里了解更多package.json属性的作用)

安装插件

Grunt只是一个载体,实际要用起来得使用各种五花八门的grunt插件(有点类似在Sublime上我们可以安装并使用各种sb插件)。

而我们的before项目需要运用到下面几个插件:

grunt —— 这个不用说了,就是Grunt它自己本身;

grunt-contrib-uglify —— 作用是压缩项目js文件;

grunt-contrib-sass —— 作用是编译项目中的sass为(压缩版的)css文件;

grunt-contrib-watch —— 作用是实现我们一开始需求的“自动化”!是最重要的一个插件之一!它会监听需要处理的文件的变动,一旦有变动就会自动执行相应处理。但是它有一个问题,就是每当监听到一处变动时,就会大费周章地把所有被监听的文件都处理一遍;

grunt-newer —— 作用是处理上方watch的毛病,让watch在监听到某个文件变动时,仅仅对变动的文件进行事务处理。

然而在node中,安装grunt插件的命令为:

npm install <插件名> --save-dev

其中后面的 “--save-dev” 表示保存为依赖,即在安装好插件后,会将此插件依赖写入package.json文件中(记得我们前面说到package.json的作用之一是记录项目的插件依赖么)。

于是我们在项目的根目录下分别运行下述命令安装插件:

npm install grunt --save-dev

npm install grunt-contrib-uglify --save-dev

npm install grunt-contrib-sass --save-dev

npm install grunt-contrib-watch --save-dev

运行时可能会提示如下的警告:

这是因为咱在package.json里没有写一些description等婆妈的东西,故这里的WARN不痛不痒直接无视它即可。

插件安装好后会发现项目根目录上多了个叫“node_modules”的文件夹,是用来存放我们安装好的插件的。另外我们打开package.json,会发现它已经自动加入了插件依赖信息:

配置Gruntfile.js文件

开始我们就提到grunt有2个不可缺少的文件 —— package.json 和 Gruntfile.js 文件,package.json咱已轻松搞定,下面新建一个Gruntfile.js 文件并输入以下代码:

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON(‘package.json‘),
    //上面是固定好的,不用管它,照搬即可。
    //下面是各插件事务的配置,顺序不分先后
    sass: { // grunt-contrib-sass的事务定义
      tocss: {
        options: {
          style: ‘compressed‘, //以压缩模式编译css,这样咱们也没必要使用grunt-contrib-cssmin插件了
          sourcemap:‘none‘  //设置不要配套输出map文件
        },
        files: [{
            expand:true,
            cwd:‘css‘,//css目录下
            src:‘**/*.scss‘,//所有css文件
            dest: ‘css‘,//输出到此目录下
            ext: ‘.css‘
        }]
      }
    },
    uglify: {  // grunt-contrib-uglify的事务定义
      compressjs: {
        files: [{
            expand:true,
            cwd:‘js‘,//js目录下
            src:‘**/*.js‘,//所有js文件
            dest: ‘output/js‘//输出到此目录下
        }]
      }
    },
    watch: {  // grunt-contrib-watch的事务定义
      all: {
        files: [‘css/**/*.scss‘,‘js/**/*.js‘],
        tasks: [‘newer:sass‘,‘newer:uglify‘]
      }
    }
  });
  //grunt.loadNpmTasks() 是告诉Grunt,咱们要使用哪些插件,顺序不分先后
  grunt.loadNpmTasks(‘grunt-contrib-watch‘);
  grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
  grunt.loadNpmTasks(‘grunt-contrib-sass‘);
  grunt.loadNpmTasks(‘grunt-newer‘);
  //grunt.registerTask(‘default‘, [])是告诉Grunt,我们在node命令行输入grunt指令后要执行哪些事务
  grunt.registerTask(‘default‘, [‘newer:sass‘,‘newer:uglify‘,‘watch‘]);  //注意 "newer:XXX"是插件grunt-newer的事件定义,表示对冒号后面的事务生效
};

Gruntfile.js的配置或许算是配置Grunt的一个难点吧,它的作用是告诉Grunt要使用哪些插件(安装了不代表一定要用对吧,当然要用的话一定得安装)、每个插件又要进行怎样的事务操作。

其实Gruntfile.js最最简单的初始化框架是这样的:

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON(‘package.json‘),

    插件事务名称: {
      ........//事务定义
    }
  });
  //grunt.loadNpmTasks() 是告诉Grunt,咱们要使用哪些插件,顺序不分先后
  grunt.loadNpmTasks(‘插件名‘);

  //grunt.registerTask(‘default‘, [])是告诉Grunt,我们在node命令行输入grunt指令后要执行哪些事务
  grunt.registerTask(‘default‘, [‘插件事务名称‘]);
};

稍微推敲下,很容易理解代码的含义。如若了解更灵活、复杂的Gruntfile.js配置,可以点此查看指引

一切都捣鼓好后,我们可以直接在node命令行(依旧定位在根目录下哦,其实可以不用再唠嗑了)输入

grunt

回车执行后便进入自动化执行状态,只要有js或者scss文件变动,变动的文件就会重新被压缩或编译:

像本章的例子是使用了sass来写样式,如果你只写原生的css,又希望能压缩样式文件,那么可以使用 grunt-contrib-cssmin 插件,其具体配置可以点此查看,本文就不赘述了。

共勉~

时间: 2024-10-10 06:38:08

应用Grunt自动化地优化你的项目前端的相关文章

如何使用Grunt脚手架快速创建Node.js项目

作者:zhanhailiang 日期:2014-11-17 1. 安装node.js,npm工具(略). 2. 安装grunt, grunt-init npm install -g grunt-cli npm install -g grunt-init 3. 下载脚手架:grunt-init-node - Create a Node.js module, including Nodeunit unit tests. git clone git@github.com:billfeller/grun

JavaScript 项目构建工具 Grunt 实践:安装和创建项目框架

 Grunt 是一个基于任务的 JavaScript 项目命令行构建工具,运行于 Node.js 平台.Grunt 能够从模板快速创建项目,合并.压缩和校验 CSS & JS 文件,运行单元测试以及启动静态服务器. 安装 Grunt 推荐 Windows 用户使用 Git Shell 来进行命令行操作.安装 Windows 桌面版 GitHub 的时候会自动安装 Git Shell. GitHub for Windows 下载地址:http://windows.github.com Grunt

android加载速度优化,通过项目的优化过程分析

通过这么长时间的盒子开发以及之前手机项目的经验,总体感觉两种不同设备还是有很多不同的地方的,首先一点不同的就是,手机项目和电视项目默认启动页面加载速度有重要区别 对于手机:手机加载网络数据,由于屏幕小,如果主页有网络图片的情况下,基本都是显示默认图片,这也是由于网速的限制,更重要的是手机上基本是图文混排,用户没看到图片可能焦点就在文本上了. 对于电视:如果应用首页加载使用默认图,会感觉特别丑,因为屏幕大,重要信息都是图片,如果没有图片,那用户看到的都是空白,用户的焦点没有了,只有等待和抱怨. 因

优化webstorm打开项目速度

优化webstorm打开项目速度 wenstorm打开项目的时候非常蛋疼,开多个项目有时还会卡死,采用一下方法优化了一下,效果显著 以mac为例 1.在应用程序里找到webstorm,双击打开包内容 2.找到bin目录下的webstorm.vmoptions,使用记事本或者编译器打开 3.将内容替换如下: -Xms2048m -Xmx3000m -XX:ReservedCodeCacheSize=2048m -XX:+UseConcMarkSweepGC -XX:SoftRefLRUPolicy

Python 编程快速上手 让繁琐工作自动化-第十一章实践项目 11.11.1命令行邮件程序

11.11.1 命令行邮件程序 编写一个程序,通过命令行接受电子邮件地址和文本字符串.然后利用selenium登录到你的邮件账号,将该字符串作为邮件,发送到提供的地址(你也许希望为这个程序建立一个独立的邮件账号).这是为程序添加通知功能的一种好方法.你也可以编写类似的程序,从Facebook 或Twitter 账号发送消息.这个项目弄了好几天,头都快炸了,终于弄好了代码如下:#!/usr/bin/env python#encoding:utf-8 '''@author:Kevinbr/>@aut

公司某项目前端技术积累

最佳实践 BootStrap + jquery + jquery插件 + sea.js/require.js + Grunt 前期技术选型 BootStrap + Backbone.js + require.js + jquery插件 ExtJS Angular.js BootStrap + jquery + jquery插件 前端技术选型总结: 之所以选择 BootStrap + jquery + jquery插件 的原因是因为ExtJS或Angular.js这种大而全的MVC框架,学习成本较

构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 javascript 文件.多终端多浏览器同步测试的开发环境,并且还可以通过 piblish 命令对项目下的文件进行打包操作. 相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常

【前端福利】用grunt搭建自己主动化的web前端开发环境-完整教程

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

一次自动化发现攻击脚本且调用前端页面快速下发配置项目的随笔

一次自动化发现攻击脚本且调用前端页面快速下发配置项目的个人笔记,服务器脚本部分主要是根据syslog来发现攻击特征然后格式化输出到网页,做各种判断后通知且通过php手动(自动)下发配置,都是一些判断循环啥的,就不贴了. 这里主要是记一些制作前端html网页和后端php页面交互的一些有用的代码 html部分: <!DOCTYPE html> 声明是html5网页 <html></html>   html格式 <body></body> 可视化主体