• grunt 合并压缩js和css文件(二)


    具体node及文件配置请看:

    grunt 安装使用(一)

    要压缩的文件

    --src/
      ajax.js
      assets.js
      touch.js
      zepto.js

    目录结构:

    dist/
    node_modules/
    src/
    Gruntfile.js
    package.json
    package.json是依赖库文件
    Gruntfile.js是执行步骤程序

    一、js合并压缩

    第一次需要先安装grunt。执行 npm install -g grunt-cli 进行安装。如果已经安装,可以忽略。

    1.package.json文件

      安装所需要的依赖文件

    {
      "name": "grunt_test",
      "version": "1.0.0",
      "devDependencies": {
        "grunt": "^1.0.1",
        "grunt-contrib-concat": "^1.0.1",
        "grunt-contrib-uglify": "^3.0.1"
      }
    }

    安装命令:

    cnpm install grunt-contrib-concat --save-dev

     2.Gruntfile.js

    这个文件是配配置文件

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

    这里加深的是js 要合并文件,同时需要加载模块及默认执行任务。

    执行

    grunt

    在当前目录下生成dist目录

    dist / 

    index.min.js

    同理

    css压缩也是一样的。

  • 相关阅读:
    Java 的字符串,String、StringBuffer、StringBuilder 有什么区别?
    访问一个HTTPS的网站的大致流程
    Spring Boot Mybatis-Plus
    Spring Boot REST
    Spring Boot 以 war 方式部署
    MVC 框架
    HDFS,MongoDB,HBase的区别和使用场景
    什么时候该用NoSQL?
    最近和朋友微信卖螃蟹有点偏离重心了
    我要出去~
  • 原文地址:https://www.cnblogs.com/congxueda/p/7226416.html
Copyright © 2020-2023  润新知