zoukankan      html  css  js  c++  java
  • grunt的简单应用

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

      废话不多说我来做一个简单的压缩js文件的程序,大家多多看看。

      首先我们需要先创建一个文件夹来执行我们接下来的步骤,文件夹可以放到自己能找到的任何位置,建完之后我们需要打开命令提示符来执行我们接下来的步骤

      1.通过命令行来进入我们的文件夹

      

      2.接下来我们需要在命令中输入 npm install grunt 命令 或 npm install grunt-cli -g 来下载环境,注意这两种是有分别的,如果我们是自己一个人做那么我们只需要用到前一种,如果是团队中的人合作的话就要用上第二种了,这回我只演示一下一个人的做法

    E:grunt>npm install grunt
    E:grunt
    `-- grunt@1.0.1
    +-- coffee-script@1.10.0
    +-- dateformat@1.0.12
    | +-- get-stdin@4.0.1
    | `-- meow@3.7.0
    | +-- camelcase-keys@2.1.0
    | | `-- camelcase@2.1.1
    | +-- decamelize@1.2.0
    | +-- loud-rejection@1.6.0
    | | +-- currently-unhandled@0.4.1
    | | | `-- array-find-index@1.0.2
    | | `-- signal-exit@3.0.2
    | +-- map-obj@1.0.1
    | +-- minimist@1.2.0
    | +-- normalize-package-data@2.3.8
    | | +-- hosted-git-info@2.4.2
    | | +-- is-builtin-module@1.0.0
    | | | `-- builtin-modules@1.1.1
    | | +-- semver@5.3.0
    | | `-- validate-npm-package-license@3.0.1
    | | +-- spdx-correct@1.0.2
    | | | `-- spdx-license-ids@1.2.2
    | | `-- spdx-expression-parse@1.0.4
    | +-- object-assign@4.1.1
    | +-- read-pkg-up@1.0.1
    | | +-- find-up@1.1.2
    | | | +-- path-exists@2.1.0
    | | | `-- pinkie-promise@2.0.1
    | | | `-- pinkie@2.0.4
    | | `-- read-pkg@1.1.0
    | | +-- load-json-file@1.1.0
    | | | +-- graceful-fs@4.1.11
    | | | +-- parse-json@2.2.0
    | | | | `-- error-ex@1.3.1
    | | | | `-- is-arrayish@0.2.1
    | | | +-- pify@2.3.0
    | | | `-- strip-bom@2.0.0
    | | | `-- is-utf8@0.2.1
    | | `-- path-type@1.1.0
    | +-- redent@1.0.0
    | | +-- indent-string@2.1.0
    | | | `-- repeating@2.0.1
    | | | `-- is-finite@1.0.2
    | | | `-- number-is-nan@1.0.1
    | | `-- strip-indent@1.0.1
    | `-- trim-newlines@1.0.0
    +-- eventemitter2@0.4.14
    +-- exit@0.1.2
    +-- findup-sync@0.3.0
    | `-- glob@5.0.15
    +-- glob@7.0.6
    | +-- fs.realpath@1.0.0
    | +-- inflight@1.0.6
    | | `-- wrappy@1.0.2
    | +-- inherits@2.0.3
    | `-- once@1.4.0
    +-- grunt-cli@1.2.0
    | `-- resolve@1.1.7
    +-- grunt-known-options@1.1.0
    +-- grunt-legacy-log@1.0.0
    | +-- colors@1.1.2
    | +-- grunt-legacy-log-utils@1.0.0
    | | +-- chalk@1.1.3
    | | | +-- ansi-styles@2.2.1
    | | | +-- escape-string-regexp@1.0.5
    | | | +-- has-ansi@2.0.0
    | | | | `-- ansi-regex@2.1.1
    | | | +-- strip-ansi@3.0.1
    | | | `-- supports-color@2.0.0
    | | `-- lodash@4.3.0
    | +-- hooker@0.2.3
    | +-- lodash@3.10.1
    | `-- underscore.string@3.2.3
    +-- grunt-legacy-util@1.0.0
    | +-- async@1.5.2
    | +-- getobject@0.1.0
    | +-- lodash@4.3.0
    | `-- which@1.2.14
    | `-- isexe@2.0.0
    +-- iconv-lite@0.4.17
    +-- js-yaml@3.5.5
    | +-- argparse@1.0.9
    | | `-- sprintf-js@1.0.3
    | `-- esprima@2.7.3
    +-- minimatch@3.0.4
    | `-- brace-expansion@1.1.8
    | +-- balanced-match@1.0.0
    | `-- concat-map@0.0.1
    +-- nopt@3.0.6
    | `-- abbrev@1.1.0
    +-- path-is-absolute@1.0.1
    `-- rimraf@2.2.8
    npm WARN enoent ENOENT: no such file or directory, open 'E:gruntpackage.json'
    npm WARN grunt No description
    npm WARN grunt No repository field.
    npm WARN grunt No README data
    npm WARN grunt No license field.

    显示上面的内容就行了,因为内容太多不好截图。

      3.之后我们需要就我们的文件夹中创建一个Gruntfile.js的js文件,之后我们需要在这个js文件中写入

    // JavaScript Document
    module.exports = function(grunt){
      //1.引入的插件,因为这回我们只写压缩js的所以我们只引入grunt-contrib-uglify这个文件
      grunt.loadNpmTasks('grunt-contrib-uglify');

      //2.设置任务:
      grunt.initConfig({

        //压缩js的变量名
        uglify:{

          compress:{

            //options是我们的要求,可以不写,写入这个是为了防止我们的文件损坏
            options:{
              mangle:false
            },

            expand:true,

            //以当前文件夹找路径
            cwd:'src',

            //因为不知道会起什么名所以用通用符*来代替,后面的.js是为了找到js文件的
            src:'*.js',

            //以当前文件夹创建同级目录的文件夹dest,接着在里面创建js文件夹后放入压缩后的js文件
            dest:'dest/js'
          }
        }
      });
      //设置默认任务:
      grunt.registerTask('default','uglify');
    }

    之后我们需要在命令符中下载所需要的插件

    npm install grunt-contrib-uglify --save-dev

    之后我们只需要在下载完后输入grunt

    之后我们就可以收获一个压缩好后的js文件了

    如果还想要其他的效果我们只需要进入grunt官网就可以慢慢调试了

  • 相关阅读:
    JS获取单选框checked的value方法
    URL链接后面的参数解析,与decode编码解码;页面刷新回到顶部jquery
    JS原生增删,判断class是否存在方法
    转载:jquery.ajax之beforeSend方法使用介绍
    css3 filter(滤镜)属性汇总与使用介绍,来源W3C
    使用 HTML5 Geolocation 构建基于地理位置的 Web 应用学习网站分享
    js获取移动端触摸坐标
    jquery如何获取手机网页触屏坐标:ontouchstart 、ontouchend、ontouchmove
    js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
    JS获取浏览器可视区域的尺寸
  • 原文地址:https://www.cnblogs.com/Z-Xin/p/7003301.html
Copyright © 2011-2022 走看看