你的位置:首页 > Java教程

[Java教程]前端自动化开发之grunt

上篇文章介绍了前端模块化开发工具seaJs,利用seaJs我们可以轻松实现前端的模块化编程,参见http://www.cnblogs.com/luozhihao/p/4818782.html

那么今天我继续介绍前端开发的另一工具——grunt。关于介绍grunt文章网上已经存在很多,而本文主要结合自己的亲身实践来讲解利用grunt实现前端开发中代码的压缩及合并。

一、准备工作

再使用grunt之前,我们先要安装node.js,利用node的包管理工具npm来安装grunt

node.js下载地址:https://nodejs.org/en/

关于如何安装及配置node不属于本文涉及范畴,所以在这里不做介绍,需要查看的童鞋可以参照:http://xiaoyaojones.blog.163.com/blog/static/28370125201351501113581/

 

二、安装grunt

安装配置完node后,我们利用npm来安装全局grunt,命令行如下:

 

完成后我们输入命令:grunt -ver 来查看grunt的版本,如果现实版本信息,则说明安装成功了:

 

ok,下一步是在你自己的项目文件中局部安装grunt

安装之前先在项目目录下新建两个文件Gruntfile.js及package.json用来配置grunt

在package.json中将如下代码粘贴进去并保存:

{ "name": "luozh", "file": "zepto", "version": "0.1.0", "description": "demo", "license": "MIT", "devDependencies": {  "grunt": "~0.4.1",  "grunt-contrib-clean": "~0.5.0",  "grunt-contrib-concat": "^0.5.1",  "grunt-contrib-copy": "~0.4.1",  "grunt-contrib-jshint": "~0.6.3",  "grunt-contrib-requirejs": "~0.4.1",  "grunt-contrib-uglify": "~0.2.1",  "grunt-contrib-cssmin": "~0.12.3",  "grunt-strip": "~0.2.1" }, "dependencies": {  "express": "3.x" }}

完了之后,我们在package.json的同级目录下输入命令行npm install:

之后我们会看到文件夹下又多了一个名为node_modules的文件夹

没错,里面放置的就是刚刚我们package.json里所配置的功能文件了。

ok,到了这里我们的grunt的安装就到此结束。

 

三、配置grunt

安装完成之后,我们需要对我们需要利用grunt实现的功能进行配置,比如我们需要调用哪些功能、文件原始路径、文件名及存放路径等。

这里我们就要用到刚刚提到的Gruntfile.js文件了,下面以配置压缩js功能为例:

module.exports = function (grunt) { // 项目配置 grunt.initConfig({  pkg: grunt.file.readJSON('package.json'),  uglify: {    options : {      banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'    },     my_target: {      files: [        {          expand: true,          //src相对路径 对dest无用          cwd: 'app/src/',          //src: '*.js',          src: ['demo.js', 'untils.js'], //不包含某个js,某个文件夹下的js          dest: 'app/src/dist/', //最后/不能省略          rename: function (dest, src) {                var folder = src.substring(0, src.lastIndexOf('/'));                var filename = src.substring(src.lastIndexOf('/'), src.length);                // var filename=src;                filename = filename.substring(0, filename.lastIndexOf('.'));                var fileresult=dest + folder + filename + '.min.js';                grunt.log.writeln("现处理文件:"+src+" 处理后文件:"+fileresult);                return fileresult;                //return filename + '.min.js';              }         }      ]    }  } }); grunt.loadNpmTasks('grunt-contrib-uglify'); // 默认任务 grunt.registerTask('default', ['uglify']);}

以上需要修改的是:

cwd: 'app/src/' 改成你需要压缩js的目录

src: ['demo.js', 'untils.js'] 改成你需要压缩的js文件名,多个以数组形式存放

dest: 'app/src/dist/' 改成你所要输出压缩后js的文件目录

配置完成后找到自己所要压缩文件的目录,执行命令:grunt uglify就ok了

显示Done, without errors 就表示压缩成功

同理,我们还可以合并js,配置如下:

module.exports = function (grunt) { // 项目配置 grunt.initConfig({  pkg: grunt.file.readJSON('package.json'),  concat: {   options: {       },   dist: {    src: ['app/src/demo.js', 'app/src/untils.js'],    dest: 'app/src/dist/libs.js'   }  },  uglify: {    options : {      banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'    },     my_target: {      files: [        {          expand: true,          //src相对路径 对dest无用          cwd: 'app/src/',          //src: '*.js',          src: ['demo.js', 'untils.js'], //不包含某个js,某个文件夹下的js          dest: 'app/src/dist/', //最后/不能省略          rename: function (dest, src) {                var folder = src.substring(0, src.lastIndexOf('/'));                var filename = src.substring(src.lastIndexOf('/'), src.length);                // var filename=src;                filename = filename.substring(0, filename.lastIndexOf('.'));                var fileresult=dest + folder + filename + '.min.js';                grunt.log.writeln("现处理文件:"+src+" 处理后文件:"+fileresult);                return fileresult;                //return filename + '.min.js';              }         }      ]    }  } }); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-concat'); // 默认任务 grunt.registerTask('default', ['uglify', 'concat']);}

添加了concat配置,利用grunt.loadNpmTasks('grunt-contrib-concat')将concat功能load进来,并包含到grunt.registerTask任务中去,

如果没有这一功能需要进行下载,同时需要在package.json进行配置,

最后执行grunt concat就ok了,如果需要同时进行压缩和合并,那么执行命令grunt就ok了~

当然,grunt除了能实现js压缩合并外,还能实现css压缩、图片压缩等等一系列功能,在这里就不一一介绍了,

所有功能的实现都需要事先安装及配置后才能使用,

关于其他功能插件的安装及配置方法可以参见grunt官网的插件列表 http://www.gruntjs.net/plugins

 

可以说利用grunt减轻了我们对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等方面的工作量,像grunt这样的前端自动化工具还有很多,比如gulp,

同时结合yeomen、bower等前端工具可以实现更为强大的自动化流程,让前端得以工程化。

 

之后我会介绍yeomen、bower、grunt相结合的自动化构建方法,欢迎关注。

 

原创文章,转载请注明来自一个萝卜一个坑  -博客园[http://www.cnblogs.com/luozhihao]

本文地址:http://www.cnblogs.com/luozhihao/p/4848709.html