• grunt前端构建工具使用教程


    grunt能干些什么?

    grunt其实是哆啦a梦的百宝袋,是工具集,拥有非常丰富的任务插件,可以实现各式各样的构建目标。

    按任务目标大致可分为四类:

    文件操作型:比如合并、压缩js和css文件等(包括)

    预编译型:比如编译less、sass、coffeescript等

    类库项目构建型:比如 angular、ember、backbone等(这种推荐使用yeoman)

    工程质量保障型:比如jshint、jasmine、mocha等

    除此之外还有像 watch (监听文件改变,自动触发构建)等功能。

    使用工具:

    node: http://www.nodejs.org

    安装:

    window:安装比较傻瓜式,就两步。

    1 下载源文件 http://www.nodejs.org/download/ 选择对应的最新msi文件。

    2 双击进行安装。

    linux:

    1 wget下载源文件

    打开 http://www.nodejs.org/download/,寻找到自己要下载的文件地址

    # wget 源文件路径

    2 解压文件

    # tar xvf 文件路径

    3 进入解压目录

    # cd node-v0.8.7

    4 检查所需要配置

    # ./configure

    5 安装

    # make install

    6 检查是否成功安装,输入命令:

    # node -v

    配置:

    npm node pakeage manage 包管理

    国内的npm镜像配置

    国内的npm安装由于某种原因总是比较慢,所以需要在做些配置了。

    设置 npm 国内镜像 

    npm config set registry http://registry.cnpmjs.org

    可选项:使用cjnpm

    grunt:https://github.com/gruntjs/

    安装:

    grunt的安装需要先安装node才能继续安装。grunt也就是相当于node的一个模块。

    1 npm install -g grunt-cli

    里边的-g 安装到全局

    卸载

    npm uninstall -g grunt-cli

    2 npm install -g grunt-init

    使用grunt-init 进行配置(待补充)

    配置:

    packjson介绍:用于配置需要拉取的grunt插件信息。

    {

        "name": "demo",

        "version": "1.0.0",

        "devDependencies": {

            "grunt-contrib-uglify": "~0.2.0"

        }

    }

      里边的devDependecies用于定义需要引入的插件信息,定义你要拉取的依赖模块,上面的代码,拉取grunt-contrib-uglify插件(用于压缩js),字段的值~0.2.0,指明需要模块的版本号,“~”是至少的意思。

    使用:npm install 依赖拉取成功后,在demo工程中生成了node_modules目录,该目录就包含了grunt-contrib-uglify插件模块的代码。

    实例:创建gruntFile.js文件

    module.exports = function(grunt) {

        // 构建任务配置

        grunt.initConfig({

            //读取package.json的内容,形成个json数据

            pkg: grunt.file.readJSON('package.json'),

            uglify: {

                //文件头部输出信息

                options: {

                    banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */ '

                },

                //具体任务配置

                build: {

                    //源文件

                    src: 'src/hello-grunt.js',

                    //目标文件

                    dest: 'build/hello-grunt-min.js'

                }

            }

        });

        // 加载指定插件任务

        grunt.loadNpmTasks('grunt-contrib-uglify');

        // 默认执行的任务

        grunt.registerTask('default', ['uglify']);

    };

    grunt核心方法:

    grunt.initConfig(obj)

    initConfig用于配置构建信息,第一个参数必须是个object。

    grunt.file.readJSON(path)

    读取一个json文件,通常我们会把构建任务的基本配置写在独立的json文件内,方便我们修改。

    // 构建任务配置

    grunt.initConfig({

        //读取package.json的内容,形成个json数据

        pkg: grunt.file.readJSON('package.json')

    });

    上面代码,将读取的json赋值给pkg字段,想要获取配置的值,就可以使用pkg.name这样的形式。

    grunt.loadNpmTasks(pluginName)

    加载指定插件任务,示例代码如下:

    grunt.loadNpmTasks('grunt-contrib-uglify');

    可以加载多个:

    grunt.loadNpmTasks('grunt-contrib-uglify');

    //css压缩

    grunt.loadNpmTasks('grunt-contrib-cssmin');

    grunt.registerTask(taskName,taskArray)

    注册任务,比如下面的代码:

    grunt.registerTask('default', ['uglify']);

    注册默认执行的任务,即你运行grunt命令时,触发的任务构建。

    第二个参数为任务目标名,在initConfig()中配置:

    grunt.initConfig({

        //读取package.json的内容,形成个json数据

        pkg: grunt.file.readJSON('package.json'),

        uglify: {

            //文件头部输出信息

            options: {

                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */ '

            },

            //具体任务配置

            build: {

                //源文件

                src: 'src/hello-grunt.js',

                //目标文件

                dest: 'build/hello-grunt-min.js'

            }

        }

    });

    uglify为任务目标名,options为grunt-contrib-uglify插件配置参数。

    banner向输出文件打印你需要的信息。

    build为具体任务构建配置

    文件的简单正则匹配语法

    文件名(目录路径)的匹配,基本上和ant一样。

    * 匹配除了/外的任意数量的字符,比如foo/*.js

    ? 匹配除了/外的单个字符

    ** 匹配包含/的任意数量的字符,比如foo/**/*.js

    ! 排除指定文件,比如src: ['foo/*.js', '!foo/bar.js']

    {} 可以理解为“or”表达式,比如src: 'foo/{a,b}*.js'

    用法举例:

    //匹配foo目录下所有th开头的js文件

    {src: 'foo/th*.js', dest: ...}

    //等价于{src: ['foo/a*.js', 'foo/b*.js'], dest: ...}

    {src: 'foo/{a,b}*.js', dest: ...}

    //优先处理bar.js,然后再处理其他文件

    {src: ['foo/bar.js', 'foo/*.js'], dest: ...}

    //排除处理foo/bar.js文件

    src: ['foo/*.js', '!foo/bar.js'], dest: ...}

    grunt常用插件  参见:http://gruntjs.cn/

    1 常用插件有

      grunt-contrib-concat:文件合并

      grunt-contrib-copy:用于复制文件或目录的插件

      grunt-contrib-clean:用于删除文件或目录的插件

      grunt-contrib-compress:用于压缩文件和目录成为zip包

      grunt-contrib-jshint:js代码检查

      grunt-contrib-mincss:css压缩

      grunt-contrib-uglify:js压缩

      grunt-contrib-watch:实时监听插件

      grunt-contrib-imagemin,能够快速的压缩工程内的图片

      grunt-contrib-yuidoc:基于YUIDOC生成js API文档

      grunt-karma:单测回归插件

    参考网页:http://www.36ria.com/6192

    http://www.36ria.com/6226

    http://www.36ria.com/6273

  • 相关阅读:
    December 23rd 2016 Week 52nd Friday
    December 22nd 2016 Week 52nd Thursday
    December 21st 2016 Week 52nd Wednesday
    December 20th 2016 Week 52nd Tuesday
    December 19th 2016 Week 52nd Sunday
    December 18th 2016 Week 52nd Sunday
    uva294(唯一分解定理)
    uva11624Fire!(bfs)
    fzu2150Fire Game(双起点bfs)
    poj3276Face The Right Way
  • 原文地址:https://www.cnblogs.com/fyking/p/3842421.html
Copyright © 2020-2023  润新知