文档章节

grunt的初次使用

cobish
 cobish
发布于 2015/11/12 21:40
字数 1318
阅读 194
收藏 0

在使用grunt之前,项目静态文件几乎没进行压缩合并便直接放到线上,部分文件手动复制粘贴到某压缩网站进行压缩。没压缩合并的文件显然耗资源,手动压缩的文件后期不易维护,每修改一次便要重复复制粘贴,很不方便。grunt的加入帮忙解决了以上问题,让开发人员更加专注于开发。这里有一篇「Grunt教程——安装Grunt」很好地教会我们如何搭建grunt环境,而我这有部分插件的「grunt-demo」可供参考学习。

 

「官网」的入门文档写得很详细,建议阅读并动手一遍。 网上有人会纠结该用grunt还是glup。个人认为,其实无论是grunt还是glup都是构建工具,基本的功能都差不多,与其浪费时间纠结该使用哪个,还不如先开始选择一个使用,等过段时间熟悉后再考虑是否接触另一个,最后再比较出哪个更适合自己岂不更好。

 

我开始使用grunt的时候只是用来对css,js文件进行合并压缩,使用到的插件分别如下:

"devDependencies": {
  "grunt": "^0.4.5",
  "grunt-contrib-clean": "^0.6.0",
  "grunt-contrib-concat": "^0.5.1",
  "grunt-contrib-cssmin": "^0.14.0",
  "grunt-contrib-uglify": "^0.10.0",
  "grunt-contrib-watch": "^0.6.1"
}

我先通过watch监控静态文件,一旦文件有改动并保存,便用concat把css或js目录下的文件进行了合并,再用cssmin或uglify把刚刚合并的文件压缩,最后用clean把合并但未压缩的文件删除掉。部分代码(以js为例)如下:

// 文件合并
concat: {
  js: {
    files: {
      'dest/js/index.js': ['src/js/index/*.js']
    }
  }
},

// 压缩js代码
uglify: {
  build: {
    expand: true,
    cwd: 'dest/js',
    src: ['**/*.js', '!*.min.js'],
    dest: 'dest/js',
    ext: '.min.js'
  }
},

// 删除多余的文件
clean: {
  js: ['dest/js/*js', '!dest/js/*.min.js']
},

// 文件监控
watch: {
  js: {
    files: 'src/js/**/*.js',
    tasks: ['concat:js', 'uglify', 'clean:js']
  }
}

后来发现cssmin和uglify其实已包含了合并的功能,于是乎把concat和clean给移除掉,因为它们功能重复了。代码如下:

// 合并压缩js代码
uglify: {
  build: {
    files: {
      'dest/js/index.min.js': ['src/js/index/*.js']
    }
  }
}

 

是的,用了cssmin和uglify后在浏览器的调试工具下便无法定位到源代码处,这是有办法解决的。办法就是使用source map,chrome和firefox的调试工具都支持,具体详情请移步「JavaScript Source Map 详解」

 

使用了cssmin和uglify之初项目还不算大的时候,你也许已经发现了一个现象。那就是我们每次一修改保存文件的时候,watch插件便会立马调用cssmin和uglify。而它们在配置里是对所有的css和js文件进行操作,虽然只对其中一个文件修改,但是目录下的所有文件都会大动干戈地进行合并压缩。配置高的电脑还行,配置低的电脑就悲剧了,至少我试过每次一保存文件都要等待个两三秒钟后合并压缩完成才能去刷新浏览器。一旦静态文件多起来,那这等待的时候只会增多不会减少。后来我找到了「grunt-newer」这个插件来缓解燃眉之急。newer只会对改动的文件进行操作,这样至少不会每次保存都对全部文件进行操作。它的使用方法很简单:

// 监控
watch: {
  js: {
    files: 'src/js/**/*.js',
    tasks: ['newer:uglify']
  }
}

 

以上便是我目前用于项目的阶段,而此时我做进行开发的项目中主要用了类似于thinkPHP的框架,于是添加css或js外部文件是在php代码里添加,如下:

<?php
  $this->addMoreCss('dest/index.min.css');
  $this->addMoreJs('dest/index.min.js');
?>

这样虽然开发使用到的文件跟上线的文件一致,但也有一些弊端,比如每次改动保存静态文件便会去执行合并压缩代码,我们每天都在时时刻刻地用ctrl+s,这是没有必要的。我们应该只在准备发版上线的时候才去合并压缩。但这时如果在开发时使用原始文件则会是这样:

<?php
  $this->addMoreCss('src/index/test1.css');
  $this->addMoreCss('src/index/test2.css');
  $this->addMoreCss('src/index/test3.css');
  $this->addMoreJs('src/index/test1.js');
  $this->addMoreJs('src/index/test2.js');
?>

上面一段代码在上线时是需要注释掉的,那在修复时又要重新打开这份代码,注释掉上面上线使用的代码。如果涉及到多个页面的修改,那得手动打开很多份类似这样的代码,而在修复完成后又得重新重复地进行注释和打开上线代码。万一有哪一段代码没看见忘了就不好了。

 

所以接下来我打算在grunt中使用「grunt-contrib-sass」「grunt-contrib-requirejs」,这样在php函数都只需要引入一个入口文件,然后sass通过import,requirejs通过require便可去加载它们需要的文件。具体结果得等我实践后才知道,但我相信如果ok的话我便可以移除cssmin和uglify两个插件,因为sass和requirejs也有合并压缩的功能。

<?php
  // 开发
  $this->addMoreCss('src/main.css');
  $this->addMoreJs('src/main.js');

  // 上线
  $this->addMoreCss('dest/main.css');
  $this->addMoreJs('dest/main.js');
?>

 

本文转载自:http://cobish.github.io/#post/2

上一篇: 使用svn分支
cobish
粉丝 33
博文 150
码字总数 45747
作品 0
深圳
私信 提问
gulp初次试用

我在用了grunt的一段时间内,越来越觉得自己离不开构建工具。但是,grunt的构建速度让我有点苦恼,即使是编译sass也需要花上一段时间。于是,我开始试用gulp,结果意外地让我惊喜。 下面代码...

cobish
2016/04/05
33
0
ElasticSearch-5.0安装head插件

环境 Windows10企业版X64 JDK-1.8 ElasticSearch-5.0.0 node-v4.5.0-x64.msi git客户端 步骤 安装node到D盘。如D:nodejs。 把NODE_HOME设置到环境变量里(安装包也可以自动加入PATH环境变量)...

yushiwh
2017/06/26
0
0
基于grunt的前端构建

在「grunt的初次使用」的基础上,这一篇继续对grunt进行探索研究。这一次不再使用php进行include静态文件,而是在html里面引入。然后主要将grunt用于两个大的方向,一个是用于开发期间,一个...

cobish
2016/04/05
42
0
前端工程化系列[03]-Grunt构建工具的运转机制

在前端工程化系列[02]-Grunt构建工具的基本使用这篇文章中,已经对Grunt做了简单的介绍,此外,我们还知道了该如何来安装Grunt环境,以及使用一些常见的插件了,这篇文章主要介绍Grunt的核心...

文顶顶水水
2018/11/10
0
0
前端开发神器:grunt快速入门

grunt是什么? grunt是一个基于nodejs的task runner,简单来说,就是类似于.net平台的msbuild以及java平台的maven。 grunt能做什么? grunt可以使你的项目中重复的任务,比如压缩,语法检查,...

knightuniverse
2013/10/16
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

以GPS为例,深入浅出讲解射频接收路径的匹配调试流程

RF接收路径的匹配流程----以GPS为例 调Matching前,至少准备两块板子。 一块完整PCB,有上全部零件 : 一块裸版,完全都没上零件 : 匹配前注意事项—铜管 可能很多人忽略这点,但其实这才是...

demyar
7分钟前
1
0
TI AM570x浮点DSP C66x + ARM Cortex-A15开发板的LCD触摸屏接口、LED指示灯

TL570x-EVM是一款由创龙基于SOM-TL570x核心板设计的开发板,它为用户提供了SOM-TL570x核心板的测试平台,用于快速评估SOM-TL570x核心板的整体性能。 TL570x-EVM底板采用沉金无铅工艺的4层板设...

Tronlong创龙
7分钟前
1
0
docker部署springboot项目

前提条件: 1.可以运行jar包的环境 2.机器上已经安装了docker 3.准备部署的springboot的jar包 4.Dockerfile文件 首先在xshell中连接服务器,然后再创建docker_test,在docker_test下创建jar...

故久呵呵
12分钟前
2
0
MaxCompute问答整理之10月

本文是基于本人对MaxCompute产品的学习进度,再结合开发者社区里面的一些问题,进而整理成文。希望对大家有所帮助。 问题一、DataStudio中是否可以通过shell节点调取MaxCompute sql语句? 不...

一肥仔
13分钟前
1
0
GMAT阅读高速解题6招秘籍分享

在做GMAT阅读题时,你是否曾因为文章内容无聊昏昏欲睡?是否看到第二段就神游不知所云?又是否看完问题选择觉得似乎每个都是正确答案?如果上面这些情况曾经发生在你身上,那么你的阅读方式和心...

bole6
14分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部