zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    冲刺第四天
    冲刺第三天
    冲刺第二天
    评估前冲刺第一天
    点击切换上一页,下一页
    react生命周期
    package.json入门
    nodeType的十二种类型
    ECMAScript 6 let和const命令
    JavaScript语言精粹_JSON
  • 原文地址:https://www.cnblogs.com/fyking/p/3842421.html
Copyright © 2011-2022 走看看