zoukankan      html  css  js  c++  java
  • windows本地搭建grunt前端项目构建环境

    初学,目前对grunt的理解和需求仅在于简单的文件合并、压缩、语法检查,其强大功能还有待研究。

    安装前环境准备

    (1)grunt依赖nodejs运行环境,所以要玩grunt得先把nodejs安装好,nodejs安装复杂不?一点不复杂,文件也不大,直接下载安装即可。

      

      nodejs下载地址:http://nodejs.org/

    安装grunt

    (1)安装好nodejs后,就可以安装grunt。grunt安装是不是也要下载个安装文件?度娘和google发现,都是采用npm这个玩儿来安装,具体采用文件安装没研究。

      ps:npm是nodejs中包管理和分发的工具,咱们上面安装nodejs时,就安装好了,所以这里直接使用即可。

      安装grunt命令:npm install -g grunt-cli

      ps:注意一定要加-cli,文档上说这玩儿会将grunt加入到系统变量中,这样就可以到处使用了,当然如果不加,可能需要自己手动去配置环境变量

      至此:grunt安装完毕

    使用grunt创建项目

      通过上面的步骤,grunt已经ok了,接下来就是用其创建项目。你可能有疑问?“哥只想用期来合并、压缩文件,用得到创建个项目吗?”。对于这个问题得先理解好grunt。

      (1)grunt是一个项目构建环境,这个有点类似于ant。grunt本身并没有提供“啥合并、压缩”功能。

      (2)这里的创建工程,其实就是grunt根据你的配置文件,加载好相关包,完成一个你想要实现的目标。比如说,你想要“合并文件”这个功能,那么就得告诉grunt,它会根据这个配置为你创建好一个具有“合并文件”功能的“可执行程序”。

    那如何创建项目呢?

      

    (1)得先为咱们将要创建的项目建立一个空文件夹,如“d:\javascriptDemo”,咱们后面的命令创建步骤仅在此项目下,即在这个文件夹下执行命令。

    (2)上面提到,grunt创建项目要先有配置文件。也就是说在创建项目之前,咱们得先搞个配置文件,这个配置文件就是package.json。哥手上没有这玩儿,不怕,咱们的npm会创建这东西。

      执行:npm init  即可创建package.json配置文件,该命令过程中会提示输入一些参数,比如项目描述、git地址、作者、密码等,如下图,其中出现的json数据就是该文件夹的内容:

    不过有点可惜,采用npm init创建的配置文件似乎不是我们所需要的“文件压缩、合并”功能的配置文件,对于这种情况,其实百度一下找个模板即可。package.json文件压缩、合并配置模板如下:

    {
      "name": "demo",
      "file": "jquery.calendar",
      "version": "0.1.0",
      "description": "demo",
      "license": "MIT",
      "devDependencies": {
        "grunt": "~0.4.1",
        "grunt-contrib-jshint": "~0.6.3",
        "grunt-contrib-uglify": "~0.2.1",
        "grunt-contrib-requirejs": "~0.4.1",
        "grunt-contrib-copy": "~0.4.1",
        "grunt-contrib-clean": "~0.5.0",
        "grunt-strip": "~0.2.1"
      },
      "dependencies": {
        "express": "3.x"
      }
    }

    (3)从配置文件中可以得知,我们在其中定义了需要处理的文件"jquery.calendar",以及一堆依赖包。ok,那现在可以创建项目了。

      执行命令:grunt install  该命令执行后,你会发现咱们的项目文件夹下多了好多东西,这些东西其实就是咱们的运行程序需要用到的文件了。

    小试文件压缩功能

    通过上面的步骤,咱们的grunt压缩环境已经创建好了,那现在可以试一下压缩功能了?不急!

    (1)咱们的待处理文件放在哪里啊?默认是放在项目根命令下的src文件夹中,所以我们得先在根目录中建立一个"src",把需要处理的jquery.calendar.js放置其中。

    (2)grunt怎么知道我是要做压缩功能呢?package.json只是配置了依赖包和待处理文件,并没说明我要做压缩功能啊?对!这个问题咱们得引入另一个文件来解决。

    该文件就是Gruntfile.js。该文件是个js不是配置文件,其实可以看做是运行的入口,同样文件放置项目根目录下:

    文件样例:

    module.exports = function (grunt) {
      // 项目配置
      grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
          options: {
            banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
          },
          build: {
            src: 'src/<%=pkg.file %>.js',
            dest: 'dest/<%= pkg.file %>.min.js'
          }
        }
      });
      // 加载提供"uglify"任务的插件
      grunt.loadNpmTasks('grunt-contrib-uglify');
      // 默认任务
      grunt.registerTask('default', ['uglify']);
    }

    ok!一切就绪,执行  grunt 命令!你会发现咱们的min文件在根目录下的dest就创建好了。

    再试文件合并功能

    上面的工程环境都配置好了,那么文件合并功能,按道理就是修改下配置即可了。合并文件依赖于grunt-contrib-concat插件,所以我们的package依赖项要新增一项"grunt-contrib-concat": "~0.3.0"。

    {
      "name": "demo",
      "file": "jquery.calendar",
      "version": "0.1.0",
      "description": "demo",
      "license": "MIT",
      "devDependencies": {
        "grunt": "~0.4.1",
        "grunt-contrib-jshint": "~0.6.3",
        "grunt-contrib-uglify": "~0.2.1",
        "grunt-contrib-requirejs": "~0.4.1",
        "grunt-contrib-copy": "~0.4.1",
        "grunt-contrib-clean": "~0.5.0",
        "grunt-strip": "~0.2.1",
        "grunt-contrib-concat": "~0.3.0"
      },
      "dependencies": {
        "express": "3.x"
      }
    }

    咱们的运行入口也得变一下,告诉grunt,这回我要做的是文件合并,合并src下所有js。

    module.exports = function (grunt) {
      // 项目配置
      grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
          options: {
            separator: ';'
          },
          dist: {
            src: 'src/*.js',
            dest: 'dest/test.js'
          }
        }
      });
      grunt.loadNpmTasks('grunt-contrib-concat');
      // 默认任务
      grunt.registerTask('default', ['concat']);
    }

    ok!执行命令 grunt

    哦,no!!出现错误,提示“grunt-contrib-concat”没安装!,ok咱们就安装。

    执行:npm i --save-dev grunt-contrib-imagemin

    再次运行 grunt,一切ok!!

    如果我们需要合并又要压缩呢,修改配置文件即可。留点给自己去研究吧..........

  • 相关阅读:
    webstorm
    呐,这是某蒟蒻幼稚的博客 ~~Welcome
    CSP-S 2021 补题记录
    CSP-S 2021 游记
    Tarjan 算法小结
    FHQ Treap 浅析
    2048游戏 (C++ Windows)
    线段树 算法分析
    树状数组 算法分析
    数学期望(ξ) 浅析
  • 原文地址:https://www.cnblogs.com/hjwen/p/3764542.html
Copyright © 2011-2022 走看看