码迷,mamicode.com
首页 > 其他好文 > 详细

前端自动化开发之grunt

时间:2015-09-30 12:40:58      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:

上篇文章介绍了前端模块化开发工具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

前端自动化开发之grunt

标签:

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!