美文网首页
Grunt介绍与应用

Grunt介绍与应用

作者: Ching_Lee | 来源:发表于2018-04-18 10:53 被阅读0次

    Grunt中文网:http://www.gruntjs.net/

    1.为何要用构建工具?

    一句话:自动化。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。当你在 Gruntfile 文件正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作。

    2.安装教程

    Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器。

    2.1 安装node.js和npm
    • 进入nodejs官网下载node https://nodejs.org/en/
      下载对应版本

      我下载了node8.9.3版本,包括npm 5.5.1版本

      下载完成后安装该文件


      安装完成

    【1】打开命令行,cmd或者Windows PowerShell
    【2】查看node版本

    node -v
    

    【3】更改npm默认安装路径
    默认是在c:\Users\Administrator\AppData里面安装,装在c盘很乱不舒服。先修改位置。

    在nodejs里面创建了两个文件夹,node_globe,node_cache作为npm默认路径。


    【4】更改npm安装默认的源

    npm config set registry https://registry.npm.taobao.org 
    npm info underscore (如果上面配置正确这个命令会有字符串response)
    

    【5】配置系统环境变量


    系统变量里面找到Path
    点击编辑,添加默认安装路径,我的是F:\nodejs\node_global
    2.2 Grunt安装

    1)安装CLI

    npm install -g grunt-cli
    

    2)Grunt项目介绍
    一个Grunt项目中应该有两份文件:package.json 和 Gruntfile。

    package.json: 此文件被npm用于存储项目的元数据,以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件,放置于devDependencies配置段内。
    Gruntfile: 此文件被命名为 Gruntfile.jsGruntfile.coffee,用来配置或定义任务(task)并加载Grunt插件的。 此文档中提到的 Gruntfile 其实说的是一个文件,文件名是 Gruntfile.jsGruntfile.coffee

    3)创建package.json文件(项目中没有该文件情况下)
    package.json应当放置于项目的根目录中。
    进入到项目的目录中,执行如下命令。

    npm init
    


    进入项目目录,执行如下命令:

    npm install grunt --save-dev
    

    项目中会生成node_modules文件夹,同时package.json中会添加依赖devDeoendencies



    4)在项目根目录中创建Gruntfile.js文件

    module.exports = function(grunt) {
    
    // 项目配置
    //uglify:压缩任务,将所有的js(src文件加中)压缩成min.js(build文件夹中)
    //concat:合并任务,将所有的min.js合并成一个min.js(build文件夹下)
      grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
          options: {
            banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
          },
          build: {
            src: 'src/<%= pkg.name %>.js',
            dest: 'build/<%= pkg.name %>.min.js'
          }
        },
        concat: {
            bar: {
                src:['build/*.js'],
                dest:'build/all.min.js'
             },
         },
         watch:{
              //多个文件可以用数组['','']。
              files:'src/<%= pkg.name %>.js',
              tasks:['uglify','concat']
         }
    
      });
    
      // 加载包含 "uglify" 任务的插件。
      grunt.loadNpmTasks('grunt-contrib-uglify');
      grunt.loadNpmTasks('grunt-contrib-concat');
      grunt.loadNpmTasks('grunt-contrib-watch');
      // 默认被执行的任务列表。
      grunt.registerTask('default', ['uglify','concat','watch']);
    
    };
    

    5 )进入到项目目录中,执行grunt命令。

    grunt
    

    如果提示有包没有安装,执行如下命令。

    npm install 包名 --save-dev
    

    相关文章

      网友评论

          本文标题:Grunt介绍与应用

          本文链接:https://www.haomeiwen.com/subject/ifkdzxtx.html