• 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用法基本一样,依客户习惯而使用。

  • 相关阅读:
    MOSS 2013研究系列动态修改WebConfig(上) 欧阳锋
    MOSS 2013研究系列MOSS 2013安装篇 欧阳锋
    GPIO
    [转]vi/vim使用进阶: 在VIM中使用GDB调试 – 使用pyclewn
    建立openwrt虚拟环境
    ebtables基本使用
    LFS小记
    Autoconf & Automake使用小记
    Packet Filter小记
    Web技术整理
  • 原文地址:https://www.cnblogs.com/chw8/p/7082397.html
Copyright © 2020-2023  润新知