基于grunt前端工程化

最新推荐文章于 2025-09-12 14:39:04 发布

weixin_30878361

最新推荐文章于 2025-09-12 14:39:04 发布

阅读量91

点赞数

CC 4.0 BY-SA版权

文章标签：前端 ruby json ViewUI

原文链接：http://www.cnblogs.com/pengjv/p/3392097.html

本文介绍了Grunt这一基于Node.js的前端构建工具的基本概念及其在实际项目中的应用。包括安装配置流程、常见任务如文件压缩合并、样式编译等操作详解。

Grunt是什么

grunt是基于nodejs的前端工程构建工具。一位牛人的话“前端80%是工程问题，20%是技术问题”，grunt就为了解决前端开发的工程问题的。

官网站点：http://gruntjs.com/

使用前提

安装nodejs 环境

下载与系统对应的安装文件，window下下载Windows Installer (.msi)。

官网： http://nodejs.org/

双击安装，一路next就可以了。安装后在cmd里运行：node –v 检查是否安装成功。如果有问题，查看环境变量path中是否有nodejs的安装路径配置。

2. 了解npm

Npm是一个NodeJS包管理和分发工具，他提供了nodejs插件的依赖管理。

官网：https://npmjs.org

现在npm已经集成在nodejs的安装包，不需要单独安装了。

常用npm命令：

npm install xxx 安装模块

npm install xxx -g 将模块安装到全局环境中

npm ls 查看安装的模块及依赖

npm ls -g 查看全局安装的模块及依赖

npm uninstall xxx (-g) 卸载模块

npm cache clean 清理缓存

构建基于grunt的前端开发工程

基于grunt构建的前端工程能做很多事情，常见的有：文件压缩，文件合并，less文件编译，sass文件编译，coffeeScript文件的编译等。具体见：http://gruntjs.com/

在grunt官网站点的get start中可以看到如果一步一步构建一个grunt工程。

安装grunt：

npm install -g grunt-cli

grunt 工程中主要的两个文件介绍：

package.json 配置工程中依赖的所有grunt 插件

例如：

{
  "name": "grunDemo",
  "version": "0.1.0",
  "dependencies": {},
  "devDependencies": {
    "grunt": "*",
    "grunt-contrib-coffee": "~0.7.0",
    "grunt-contrib-watch": "~0.3.1",
    "grunt-contrib-uglify": "*",
    "grunt-contrib-concat": "~0.1.3",
    "grunt-contrib-cssmin": "~0.4.2",
    "grunt-contrib-clean": "~0.4.1",
    "grunt-contrib-copy": "~0.4.1",
    "grunt-contrib-less": "~0.7.0"
  }
}

如果工程中已经存在此文件，只需运行以下命令就可在相应的目录下面下载grunt的插件。

npm install

如果package.json中还没有配置相应插件，安装时可以添加以下参数自动将插件配置到package.json文件。

npm install XXX --save-dev

Gruntfile.js 工程任务定义和运行控制文件。

module.exports = function (grunt) {

    grunt.file.defaultEncoding = 'utf-8';

    // Project configuration.
    grunt.initConfig({
            pkg: grunt.file.readJSON('package.json'),

            //清空已经build的文件
            clean: {
                build: {
                    src: ["./build/**/*"],
                    filter:"isFile"
                }
            },

            //coffee文件编译路径配置
            coffee: {
                compile: {
                    options: {
                        bare: true
                    },
                    expand: true,
                    cwd: './src/javascripts',
                    src: ['**/*.coffee'],
                    dest      : "./build/javascripts",
                    ext       : '.js',
                    flatten   : false
                }
            },
            //复制文件
            copy: {
                main: {
                    expand    : true,
                    cwd       : './src/javascripts/',
                    src       : ["**/*.js"],
                    dest      : "./build/javascripts"
                }
            },

            //scss 文件编译配置
            compass: {
                compile: {
                    options: {
                        sassDir   : "./src/stylesheets",
                        cssDir    : "./build/stylesheets",
                        debugInfo : false,
                        noLineComments : true,
                        outputStyle : 'compressed'
                    }
                }
            },
            //编译less文件
            less: {
                compile: {
                    options: {
                        paths: ['./build/stylesheets']
                    },
                    files: {
                        './build/stylesheets/indexLess.css': ['./src/stylesheets/index.less']
                    }
                }
            },

            //合并文件
            concat: {
                options: {
                    separator: ';'
                },
                array: {
                    files: {
                        "./build/javascripts/concatIndex.js": ['./src/javascripts/concat/a.js','./src/javascripts/concat/b.js']
                    }
                }
            },
            //js压缩
            uglify: {
                codegen: {
                    options: {
                        preserveComments: false,
                        //compress: true
                        // 用于将utf-8编码的文件转换为ascii编码，以防止js脚本在gbk页面上出错
                        //alternative，为用到的utf-8编码文件设置 charset='utf-8'
                        beautify:{
                            ascii_only:true
                        }
                    },
                    files: [
                        {
                            dest  : "./build/javascripts/index-min.js",
                            src   : ['./build/javascripts/index.js','./build/javascripts/concatIndex.js']
                        }
                    ]
                }
            },
            //css压缩
            cssmin: {
                //css: {
                //    expand: true,
                //    src: '**/*.css',
                //    ext: "-min.css",
                //    cwd: "./build/stylesheets/",
                //    dest: "./build/stylesheets/"
                //}
                css: {
                    files: [
                        {
                            dest: "./build/stylesheets/index-min.css",
                            src: "./build/stylesheets/index.css"
                        },
                        {
                            dest: "./build/stylesheets/indexLess-min.css",
                            src: "./build/stylesheets/indexLess.css"
                        }
                    ]
                }
            },
            //监控任务
            watch: {
                compass: {
                    files: ["src/stylesheets/**/*.scss"],
                    tasks: ["compass:compile", "cssmin:css"]
                },
                coffee: {
                    files: ["./src/javascripts/**/*.coffee"],
                    tasks: ["coffee","uglify"]
                }
            }
    });
    //加载grunt模块
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-compass');
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-coffee');

    grunt.registerTask('default', ["clean", "coffee", "concat", "uglify", "less", "compass", "cssmin"]);

};

sass环境配置

demo工程中有sass相关编译和配置，所以这里也说下sass环境的配置

1、安装ruby。在这里下载ruby安装包安装就可以。https://www.ruby-lang.org/zh_cn/ 或者 http://rubyinstaller.org/

2、安装compass。http://www.ruanyifeng.com/blog/2012/11/compass.html

运行：