Grunt打包seajs项目

news/2024/7/4 20:32:27

在使用seajs时,常常将若干脚本分为多次require进来,这样开发中比较方便,但是,会增加http请求次数,在生产环境中需要进行打包合并、压缩等操作。

Grunt构建工具为例,对一个seajs项目打包:

普通的项目,直接对脚本进行合并、压缩接口,但是seajs中会涉及到动态引入的依赖脚本,需要对依赖的脚本也进行合并压缩操作。

具体思路是:

一般在使用define定义一个模块时,通常省略了moduleID标识的声明,而且seajs是依赖后置的,根据需要随时引入依赖脚本,所以依赖信息在定义的也未声明,需要去解析获取这些信息。Grunt中提供了一个grunt-cmd-transport插件,专门用于提取模块的moduleId和依赖dependencies信息。将各脚本以definemoduleId[dep1,dep2,..],function (){})的形式重新定义,明确了模块的id和依赖数组,将这些重新定义的脚本放置在一个临时文件夹里如build中,然后对这里面的文件进行合并、压缩。

项目的目录结构:

 

 

module.exports = function (grunt) {
  // 项目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),


    //找出依赖文件,将依赖的文件由匿名模块变为具名模块(定义moduleID),放在一个临时目录里.build
    transport:{
      options:{
        path:['.']
      },
      utils:{
        options:{
            //format : 'dist/modules/{{filename}}' //生成的id的格式
            idleading:'dist/modules/'    //最终引用的js脚本的位置, (依赖脚本的moduleID以idleading作为相对路径)
            //如transport后的形式   define("dist/modules/codewin/codewin", [], function(require, exports, module) {
        },
        files:[{
          expand: true,
          cwd: 'modules/',    //将modules下的所有js脚本进行transport操作,将生成的文件存放在.build/modules下
          src: '**/*.js',
          filter: 'isFile',
          dest: '.build/modules/'
        }
        ]
      },
      //单独对另一路径下的一个文件index.js进行transport
      index:{
        options:{
          idleading:'dist/js/'    //最终引用的js脚本的位置  define('dist/js/*',[],function (){})
        },
        files:[{
          expand: true,
          cwd: 'js',
          src: 'index.js',
          filter: 'isFile',
          dest: '.build/js'
        }
        ]
      }
    },
 concat : {
      options : {
        separator: '/*-------每个文件的分割-------*/',
        banner:  '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
          '<%= grunt.template.today("yyyy-mm-dd") %> */',
        footer: '/*-------合并文件的footer-------*/'
      },
      sub: {
        src: ['.build/modules/codewin/*.js','!.build/modules/codewin/*-debug.js','.build/modules/head/head.js'],
        dest: '.build/util.js'   //合并临时目录.build中的依赖脚本
      },
      all : {
        src: ['.build/js/index.js','.build/util.js'],  //将依赖的脚本与主文件进行合并
        dest: 'dist/all.js'
      }
    },

    /**
     * 压缩 合并后的 文件
     */
    uglify: {
      hellosea: {
        files: {
          'dist/all.js': ['dist/all.js'] //对dist/all.js进行压缩,之后存入dist/all.js文件
        }
      }
    },
    clean:{
       build : ['.build'] //清除临时文件夹.build文件
    }





  });
  
  // 加载提供"uglify"任务的插件
   grunt.loadNpmTasks('grunt-cmd-transport');
   grunt.loadNpmTasks('grunt-contrib-concat');   //这里使用的是contrib-concat进行的合并,使用cmd-concat会出现错误,还没弄懂啥原因
   grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-clean');

   grunt.registerTask('default',['transport','concat','uglify','clean']);
  



}

 

转载于:https://www.cnblogs.com/lydialee/p/5446767.html


http://www.niftyadmin.cn/n/3095329.html

相关文章

Dell R系服务器装系统(centos7)BIOS设置

如果不设置通电开机 我会用第二种安装系统 第一种 下图界面&#xff0c;键盘按F2 进入下图界面&#xff0c;点击System BIOS 进入下图界面&#xff0c;点击Boot Setting 进入下图界面&#xff0c;点击BIOS Boot Setting 进入下图界面&#xff0c;点击Hard-Disk Driver Sque…

GridView 弄的 StringGrid

1、 主界面 layout_main.xml &#xff1a; 1 <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"2 xmlns:tools"http://schemas.android.com/tools"3 android:layout_width"match_parent"4 android:lay…

zabbix3.0配置邮件报警

我们部署一套监控软件&#xff0c;报警这一块自然不可或缺&#xff0c;接下来我们看看zabbix如何实现邮件报警。1、编写发送邮件的脚本zabbix通脚本发送邮件&#xff0c;遵循的传参格式为&#xff1a;脚本 收件人 标题 邮件内容先来看看脚本&#xff08;sendmail_zabbix.py…

mac 键盘使用

2019独角兽企业重金招聘Python工程师标准>>> 1)按 delete 键&#xff0c;实现 Windows 键盘上退格键的功能&#xff0c;也就是删除光标之前的一个字符&#xff08;默认&#xff09;&#xff1b; 2)按 fndelete 键&#xff0c;删除光标之后的一个字符&#xff1b; 3)…

Windows与centos,centos与centos互传文件

Windows与centos相互传文件 要有个工具PentestBox&#xff08;很强大&#xff09;下面是下载链接 链接&#xff1a;https://pan.baidu.com/s/1CF7HzjiGi3wnpScphJoF3g 提取码&#xff1a;hvfm 复制这段内容后打开百度网盘手机App&#xff0c;操作更方便哦 安装如下(安…

Provisioning Services 7.8 入门系列教程之一 部署学习环境介绍

首次接触Provisioning Services时&#xff0c;让笔者想起了以前。不知是一九九几年&#xff0c;笔者已记不清。那时&#xff0c;个人电脑还很贵。为了节约成本&#xff0c;好多局域网采取无盘工作站。记得当时使用是Novell的NetWare 3.12&#xff0c;当时还是用的DOS。当时&…

centos7装docker

Docker是什么&#xff1a; Docker是一个开源的应用容器引擎&#xff0c;Docker可以让开发者打包应用及依赖包到一个轻量级、可移植的容器中&#xff0c;然后发布到任何Linux上运行&#xff0c;容器是完全沙箱机制&#xff0c;相互间不会有任何接口&#xff0c;而且容器性能开销…

连连看的原生JS实现V2

对上一次的连连看程序进行了一点修改&#xff1a; 1 var llk function () {2 this.ReStart();3 }4 llk.prototype {5 Init: function () {6 //初始化游戏界面7 for (var i 0; i < 5; i) {8 …