简单配置grunt

配置gulp还是grunt都是在node的环境下安装的,所以在这之前保证你的node环境已经安装好了!

--------------------------------------------------------------------------------

* nodejs安装很简单,去百度搜索 nodejs官网下载。

   下载这个之后直接双击,点击安装和下一步就好,这里很简单不必多说。

*其次就是验证你安装nodejs是否成功的方法:别多想,fn+f5,输入cmd,然后输入,node -v,出现了下面结果就说明安装成功了,然后继续修行!

然后安装淘宝镜像,安装淘宝镜像的原因你好奇可以自己百度一下!接下来步骤:在刚才输入node -v的界面输入npm install -g cnpm --registry=https://registry.npm.taobao.org 等待安装!安装完成同样,可以输入cnpm -v验证有木有安装成功! 接下来需要你在某个文件夹下操作,跟着做,输入(我进入F盘的requirejs):1,f:

      2,cd requirejs ,

      3.全局安装grunt,输入:  cnpm install -g grunt-cli

      4,这之后要配置一个json文件在你刚才的目录下, ,

      5.输入:cnpm install。安装成功会生成一个node_modules的文件。

      6,跟配置json文件一样配置Gruntfile.js:在你的此js文件中输入:

  读取package.json的信息
pkg:grunt.file.readJSON('package.json') module.exports = function(grunt){
// 配置
grunt.initConfig({
pkg:grunt.file.readJSON('package.json')
})
// 加载插件
grunt.loadNpmTasks('grunt-contrib-uglify'); // 默认任务
grunt.registerTask('default',['uglify']);
}
其中grunt.loadNpmTasks('grunt-contrib-uglify');是压缩js插件,就是我我这里智配置了js压缩插件,需要什么直接加载插件就行,然后后面的步骤都一样;解释一下uglify:{}对象里面的build参数,src是你要压缩的js路径,dest是一个你要解压到的路径;配置号以后,基本可以压缩你js下的文件了;
7,命令行输入:grunt;出现了,绿色的 Done without error说明压缩成功,文件夹有 a.mon.js说明成功了; 一些插件和参数供你们学习和参考:
<!--
grunt-contrib-uglify js压缩
grunt-contrib-uglify:压缩以及合并JavaScript文件。
参数: banner:文档头部添加,一般做说明和注释用 footer:文档底部添加,与banner功能相同
mangle:参数为false不混淆变量名(不改变原始定义的变量名);true:压缩后,改变原始定义的变量名
preserveComments:参数为all:保留注释;false:删除全部注释;some:保留@preserve/@license/@cc_on等注释 report:参数为min:输出压缩率;false:不输出信息;也可为gzip beautify:参数为true:美化代码,即格式化显示,合并对象等;false:不美化代码 1.按原文件结构压缩js文件夹内所有JS文件 expand:如果设为true,就表示下面文件名的占位符(即*号)都要扩展成具体的文件名。
cwd:需要处理的文件所在目录
src:表示需要处理的文件。如果采用数组的形式,数组中的每一项都是一个文件名,可以使用通配符(*)。
dest:处理后的文件所在的目录。
ext:处理后的文件的后缀名。
flatten:删除所有生成的dest的路径部分。
rename:一个函数,接受匹配到的文件名、匹配的目标位置,返回一个新的目标路径。 grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
//添加banner
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
buildall: {
files: [{
expand: true,
cwd: 'js',//js目录下
src: '**/*.js',//所有js文件
dest: 'output/js'//输出到此目录下
}]
}
}
}); 合并压缩
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
release: {// 合并压缩a.js和b.js
files: {
'output/js/index.min.js':['js/a.js','js/b.js']
}
}
}
});
 



前端构建工具grunt的更多相关文章

  1. 前端构建工具 Grunt 入门

    之前也介绍过前端构建工具 Ant 和 Yeoman,其中 Yeoman 工具就包含了 Grunt 所以就不多说.那么与 Ant 相比 Grunt 有这么几个优点: Javascript 语法,相比 A ...

  2. 前端项目构建工具---Grunt

    什么是Grunt? grunt是javascript项目构建工具,在grunt流行之前,前端项目的构建打包大多数使用ant.(ant具体使用 可以google),但ant对于前端而言,存在不友好,执行 ...

  3. Gulp.js----比Grunt更易用的前端构建工具

    Gulp.js----比Grunt更易用的前端构建工具 Grunt一直是前端构建工具,然而他也不是毫无缺陷的,gulp的作者 Eric Schoffstall 在他介绍 gulp.js 的 prese ...

  4. 前端构建工具的用法—grunt、gulp、browserify、webpack

    随着前端项目的飞速发展,项目越来越大.文件越来越多,前端工程化的工具也越来越多.下面介绍目前最流行的四种构建工具——grunt.gulp.browserify.webpack 所有的构建工具都是基于N ...

  5. Gulp, 比Grunt更好用的前端构建工具

    Gulp, 比Grunt更好用的前端构建工具 本文主要从两个方面介绍Gulp:一,Gulp相对于Grunt的优势: 二,Gulp的安装和使用流程 Gulp相对于Grunt的优势 gulp.js 的作者 ...

  6. 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍

    前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...

  7. 前端构建工具之gulp(一)「图片压缩」

    前端构建工具之gulp(一)「图片压缩」 已经很久没有写过博客了,现下终于事情少了,开始写博吧 今天网站要做一些优化:图片压缩,资源合并等 以前一直使用百度的FIS工具,但是FIS还没有提供图片压缩的 ...

  8. 前端构建工具gulpjs的使用介绍及技巧

    gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速 ...

  9. 前端构建工具gulp介绍

    2016年3月3日 10:46:08     晴 前端构建工具gulpjs的使用介绍及技巧 gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简 ...

随机推荐

  1. [ActionScript 3.0] AS3动画类Tweener中滤镜的运用

    package { import caurina.transitions.Tweener; import caurina.transitions.properties.FilterShortcuts; ...

  2. char 汉字

    Unicode/UCS总结: UCS和Unicode使用最大32bit来表示字符(它的范围很大,但不一定全使用,常使的是UCS-2),它用2~4个字节的空间描述了已知的接近全部的字符(并且仍在更新,还 ...

  3. 页面设计--Grid列表

    Grid列表控件 功能:主要实现Html Table功能,支持多表头.固定表头.固定列.输出.组合查询.编辑功能 优点:可以快速的通过数据集合生成多表头.多样式的列表.通过简单的拖拉实现多层表头. G ...

  4. 最大子序列和(O(n))

    下面介绍一个线性的算法,这个算法是许多聪明算法的典型:运行时间是明显的,但是正确性则很不明显(不容易理解). //线性的算法O(N) long maxSubSum4(const vector<i ...

  5. IOS学习之路- 运行过程

    1. 执行Main函数(在main.m文件中) 2. 加载MainStoryborad.storyboard文件 * 创建ViewController文件 * 根据storyboard文件中描述创建V ...

  6. C语言sizeof陷阱

    执行以下程序,查看输出: #include <stdio.h> #define TOTAL_ELEMENTS (sizeof(array) / sizeof(array[0])) int  ...

  7. #define的一些

    // 生成一个字符串 #define NSString(...) [NSString stringWithFormat:__VA_ARGS__]

  8. phpDoc使用说明

    技术文档可以使人们更好得使用他人的代码库,然而,作为开发人员,编写文档确是一件让人头疼的事情.PHPDoc是PHP文档注释的一个标准,它可以实现为代码生成API文档. PHPDoc注释规范: 块注释的 ...

  9. 洛谷P1465

    P1465 序言页码 Preface Numbering 74通过 111提交 题目提供者该用户不存在 标签USACO 难度普及/提高- 提交  讨论  题解 最新讨论 暂时没有讨论 题目描述 一类书 ...

  10. TCP/IP详解学习笔记(6)-- IP选路

    1.概述      路由算法是用于获取路由表中的路由项目.它是路由选择协议的核心. 2.路由算法的分类      从路由算法能否随网络的通信量或拓扑自适应的进行调整变化来分,可以分为两类. 静态路由选 ...