• grunt的安装及使用


    windows下安装grunt需要先安装ruby和nodejs
    ruby -v 测试ruby是否安装成功
    node -v 测试nodejs是否安装成功
    npm -v 测试npm是否安装成功(npm是node.js的包管理器,安装node.js会自动安装npm。grunt和grunt插件就通过npm安装并管理。)

    Grunt 依赖 Node.js 所以在安装之前确保你安装了 Node.js。然后开始安装 Grunt。

    实际上,安装的并不是 Grunt,而是 Grunt-cli,也就是命令行的 Grunt,这样你就可以使用 grunt 命令来执行某个项目中的 Gruntfile.js 中定义的 task 。但是要注意,Grunt-cli 只是一个命令行工具,用来执行,而不是 Grunt 这个工具本身。

    安装 Grunt-cli 需要使用 npm,使用下面一行即可在全局范围安装 Grunt-cli (-g 命令会安装到全局),换句话说,就是你可以在任何地方执行 grunt 命令:
    npm install -g grunt-cli

    (1)创建grunt项目:

    假设项目在d盘目录,那么进入D盘
    cd D:

    创建项目文件夹:
    mkdir 项目文件夹(如:site)

    进入文件夹:
    cd site

    在该文件夹目录下添加两个文件:package.json 和 Gruntfile.
    package.json:被npm用于存储项目的元数据,以便将此项目发布为npm模块。
    Gruntfile:此文件可被命名为Gruntfile.js 或 Gruntfile.coffee,用来配置或定义任务并加载grunt插件。
    package.json文件:
    {
    "name": "my-project",
    "version": "0.1.0"
    "devDependencies": {
    "grunt": "~0.4.1"
    }
    }

    (2)安装最新版的grunt:
    npm install grunt --save-dev
    通过 npm 安装了 grunt 到当前项目,同时加上了 —save-dev 参数,表示会把刚安装的东西添加到 package.json 文件中

    (3)安装grunt插件:
    npm install grunt-contrib-cssmin(插件名称) --save-dev

    注:如果要安装指定版本的grunt或grunt插件,只需运行npm inatall grunt@Version --save-dev (Version是指需要的版本,指定的版本号即可)

    (4)配置Gruntfile.js
    (4.1)在grunt.initConfig中添加配置,如:添加concat插件的配置,如下
    grunt.initConfig({
    concat:{
    dist: {
    src: ['src/foo.js','src/bar.js'],
    dest: 'dist/output.js'
    }
    }
    });

    (4.2)加载指定插件任务
    grunt.loadNpmTasks('grunt-contrib-concat');

    (4.3)注册插件任务
    grunt.registerTask('default',['concat','watch']);
    default 是别名,是默认的task,当在项目目录执行grunt的时候,它会执行注册到default上的任务。

    grunt.registerTask('compress',['uglify:build']);
    如果要执行这个task,就不能只输入grunt命令了,需要输入 grunt compress 命令来执行这条task,而这条task的任务是uglify下面的build任务,也就是说,我们只会执行uglify里面的build定义的任务,而不会执行uglify里面定义的其他任务。
    这里需要注意的是,task 的命名不能与后面的任务配置同名,也就是说这里的 compress 不能命名成 uglify,这样会报错或者产生意外情况。

    (5)执行任务:
    执行配置中所有的任务:grunt
    执行某个特定的任务:grunt cssmin(任务)

    grunt配置任务可查看http://www.gruntjs.net/configuring-tasks

  • 相关阅读:
    iOS中过滤html文档中的标签
    十六进制函数转换UIColor对象
    vue使用echarts
    vue打包部署
    charels代理跨域访问接口
    vue 使用highcharts
    vue配置跨域
    命令行
    安装nvm
    vsCode个人设置
  • 原文地址:https://www.cnblogs.com/cyj7/p/4838326.html
Copyright © 2020-2023  润新知