zoukankan      html  css  js  c++  java
  • grunt前端自动化(压缩)工具

    grunt非常强大的自动压缩代码,使用代码更加轻量、简洁,所以grunt是非常值得学习的。

    安装grunt是基于nodeJS,打开cmd框,我们可以输入node -v 检测是否在node服务下

    需要npm包管理工具安装grunt,检测npm参考上面,安装好是会提示版本号。

    然后全局安装grunt输入命令: npm install grunt-cli -g 

     → 安装完成。

    切到D盘创建一个存放grunt的文件夹,输入命令:npm install grunt。参考上面会有安装成功的提示。

    依次安装好。输入: grunt --version

      grunt安装好了。

    接下来就可以操作frunt压缩了O(∩_∩)O~

     1  //创建Gruntfile.js--->
     2 
     3 1.引入
     4 module.export(grunt){
     5 grunt.loadNpmTasks('grunt-contrib-uglify')//依赖插件
     6 
     7 2.设置任务
     8 grunt.initconfig({
     9     uglify:{
    10         min:{
    11             options:{
    12             mangle:false
    13        },
    14             expand:true,(分开压缩)
    15             cwd:'src',
    16             src:'*.js',(文件的地址文件名)
    17             dest:'dest',(压缩后的地址和文件名)
    18             rename:funcion(dest,src){
    19             return dest + '/' +src.replace('.js','.min.js');
    20             }
    21         }
    22       }
    23 })
    24 //设置默认任务
    25 grunt.registerTask('default',['uglify'])
    26 }

    //Gruntfile.js放在要压缩的代码同级目录下。

    然后可以打开cmd,运行grunt 就可以看到压缩好的加min的代码了O(∩_∩)O~.

    常用的的插件有

    grunt.loadNpmTasks('grunt-contrib-uglify');//js压缩
    grunt.loadNpmTasks('grunt-contrib-concat');//css合并
    grunt.loadNpmTasks('grunt-contrib-cssmin');//css压缩
    grunt.loadNpmTasks('grunt-contrib-htmlmin');//html压缩
    grunt.loadNpmTasks('grunt-contrib-imagemin');//image压缩
    grunt.loadNpmTasks('grunt-contrib-watch');//检测代码变化,无刷新压缩

    grunt和gulp用法基本一样,依客户习惯而使用。

  • 相关阅读:
    cocos2d-x 3.0rc开发指南:Windows下Android环境搭建
    CSS 最核心的几个概念
    android CMWAP, CMNET有何差别
    JAVA读、写EXCEL文件
    freemarker报错之三
    “大型票务系统”和“实物电商系统”在支付方面的差别和联系
    C++内存泄露检測原理
    递归算法浅谈
    自写图片遮罩层放大功能jquery插件源代码,photobox.js 1.0版,不兼容IE6
    linux 之 getopt_long()
  • 原文地址:https://www.cnblogs.com/chw8/p/7082397.html
Copyright © 2011-2022 走看看