基于grunt前端工程化

时间 2019-12-10

标签基于 grunt 前端工程栏目 Node.js 繁體版

原文原文链接

Grunt是什么javascript

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

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

使用前提 前端

安装nodejs 环境

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

官网： http://nodejs.org/node

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

2. 了解npmjson

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

官网：https://npmjs.orgsass

如今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环境的配置

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

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

运行：

gem install compass

问题：

安装compass时提示http 304 ，ruby版本太低，从新下载高版本的rubyinstaller。

安装compass没有反应或者很慢，有可能要FQ或者设置https协议，具体google下了。

编译sass时提示配置环境变量，可是环境变量已经配置了，运行如下命令可解决问题。

gem update --system

编译sass文件报 invalid charset GBK, 在环境变量配置： rubyopt="-Ku"

demo下载地址：http://pan.baidu.com/s/1nBGLU

参考: http://beiyuu.com/grunt-in-action/