超详细Gulp打包seajs模块压缩合并，绝对对你项目有帮助 ~

最新推荐文章于 2021-06-18 23:34:21 发布
最新推荐文章于 2021-06-18 23:34:21 发布
阅读量200 收藏
点赞数
分类专栏： gulp 文章标签： js gulp es6 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gongjin2012/article/details/114904974
版权

前言

  • 项目背景：
    • 项目存在于n+1年前的php旧框架中，其中使用的技术大家不用猜应该也知道了；
    • 由于其中许多业务一直都存在这个php旧框架中，而且暂时性的不存在做整体迁移的情况，所以只能在php旧框架中动手了 [😭 伤心太平洋]；
  • 现阶段需解决的点：
    • php旧框架版本戳问题 [😭 暗自伤心]：由于浏览器缓存机制，每次修改文件，需手动更改对应的版本戳，修改成本较高，涉及文件变更也较多；
    • ES6语法支持问题 [😭 猛男落泪]：了解过javascript的同学应该知道，ES6语法可以更精简你的代码，从而提升你的开发效率；
    • js、css 文件未压缩 [😒 用户难受]；
    • 由于我们都是有追求技术的Team，同时也秉承用户至上的理念，所以为了解决上述问题，我们的技术革命刻不容缓；

技术调研

  • Grunt VS Gulp VS Webapck
  • Grunt：
    • 配置与生态没有达到我们的要求
  • Webapck：
    • 不支持CMD模式，需下载对应的转换成AMD或CommonJs的插件；
    • 由于项目的seajs写法没有统一性，故可能存在转换后踩坑的情况；
  • Gulp：
    • 与seajs的生态配合较好；
    • 针对seajs打包的一系列流程与插件都有实例；
    • 与其它项目的打包构建一致性；
  • 终上所述，我们选择了gulp [😩 ]

php旧框架现有目录介绍

└── 项目名
		├── ....		php文件
		├── images  静态图片
        ├── include 前端页面静态js、css、images等（gulp运行后主要操作的目录一）
    	│		├── ...
    	│		├── javascript
    	│		├── ...
	    │		├── css
	    │		├── ...
	    │		├── static
	    │		├── ...
	    │		├── gulpfile.js
	    │		├── package.json
	    │   └── ...
	    ├── lib 		php文件
	    ├── ... 		其它php文件
	    ├── tmpl 		前端页面模板文件（gulp运行后主要操作的目录二）
	    └── ... 		其它配置文件

Gulp打包流程图

Gulp打包流程图

  • 看了上面的流程图，你是否在怀疑自己，是不是感觉脑壳还是懵的；
  • 你不用怀疑，因为这是专门针对我们旧框架项目定做的打包流程（ps：其它地方大概也许应该就不合适了）；
  • 那我们来详细介绍下吧 ~

gulp打包依赖

gulp运行

 由于前端资源与模板主要存在于include目录与tmpl目录，故只会对该两个目录进行操作；

1. 操作include目录： 

该文件目录主要保存的是js、css、images静态资源
1.1 复制include目录下的文件
  • 主要是为了区分php的变量访问，防止出现访问错误；
  • on('end', fun) ：主要为了区分gulp异步打包机制，防止某些文件复制了被替换的现象；
// 复制include文件下的某些文件至.build，去做构建处理
gulp.task('copyInclude', function (cb) {
    gulp.src(copyPaths.paths) // paths为路径处理
        .pipe(gulp.dest('.build'))
        .on('end',function() {
            console.log('copyInclude 执行完成了');
            cb();
        })
});
1.2 压缩合并js, css文件

  • 压缩css的同时，转义css文件中的相对路径引用，例如：../../../../../

     // 处理并压缩css文件；
 gulp.task('minifyCSS', function () {
     minifyCSS('{css,javascript,static}/**/*.css', '.build')
 })
 
 // ......
 
 /**
  * 壓縮 CSS 公共方法
  * replace(/(..\/){3,5}images\//gi’替换图片路径的正則
  * 匹配 ../../../images/ 字符串內容，../ 是 3~5 個
  * @param {String} path 目標路徑
  * @param {String} destPath 輸出路徑
  */
 function minifyCSS (path, destPath) {
     var cssFsCache = fsCache('.gulpCache/csscache');
     gulp.src(path)
         .pipe(replace(/(..\/){3,5}images\//gi, `//images${env_name}.591.com.tw/`))
         .pipe(cssFsCache)
         .pipe(minifycss({
             compatibility: 'ie9'
         }))
         .pipe(cssFsCache.restore)
         .pipe(gulp.dest(destPath));
 }

  • 压缩js文件同时，做babel的es6语法的转义；

     // 处理并压缩 JS 文件
 gulp.task('uglifyJS', ['seaCombo'], function (cb) {
     jsPaths.paths.forEach(function(item,index){
         // index === (jsPaths.paths.length - 1) 解决回调函数次数过多问题，只能回调一次
         uglifyJS(item.entryPath, item.outputPath, index === (jsPaths.paths.length - 1) && cb)
     })
 });
 
 /**
  * JS 壓縮
  * @param {String} path
  * @param {String} destPath
  * @param {回調函數} cb
  */
 function uglifyJS (path, destPath, cb) {
     var jsFsCache = fsCache('.gulpCache/jscache');
     pump([
         gulp.src(path),
         jsFsCache,
         babel({
             presets: ['@babel/env'],
             sourceType: 'script' // 簡單理解,不會添加 'use strict'
         }),
         uglify({
             mangle: { reserved: ['require', 'exports', 'module'] }
         }),
         jsFsCache.restore,
         gulp.dest(destPath)
     ],
     cb)
 }

  • 压缩文件时忽略 require, exports, module是为了seajs合并时做处理；

  • seaCombo 任务合并seajs：

     // seajs 的 alias config
 const staticConfig = require('./static/alias/static');
 const houseConfig = require('./static/alias/house');
 const userCenterConfig = require('./static/alias/userCenter');
 const configAlias = Object.assign({}, staticConfig, userCenterConfig, houseConfig);
 
 // 合併 sea.config 中的alias 的 JS
 gulp.task('seaCombo', function (cb) {
 
     const configAliasArr = Object.keys(configAlias);
 
     configAliasArr.forEach(function (item, index) {
 
         // 切割路径有 ? 的时间戳, 为了使seajsCombo插件识别
         let nowItem = configAlias[item].split('?')[0];
 
         // 从相对路径变成绝对路径，为了使seajsCombo插件识别
         configAlias[item] = path.resolve(__dirname, nowItem)
         let srcString = configAlias[item];
         let _base;
 
         const hasStatic = srcString.includes('static');
         const hasJavascript = srcString.includes('javascript');
 
 
         if (hasStatic || hasJavascript) {
             _base = (hasStatic && 'static') || (hasJavascript && 'javascript')
         } else {
             return;
         }
         return gulp.src(srcString, { base: _base })
             .pipe(seajsCombo({
                 map: configAlias,
                 ignore: jsPaths.ignoreConfig
             }))
             .pipe(gulp.dest('.build/' + _base))
             .on('end',function() {
                 index === (configAliasArr.length - 1) && cb();
             })
     })
 
 });

    • 自定义插件**gulp-combo-seajs**主要解决问题：

      • 支持require("xx.css")引入问题
      • 以seajs.config的alias别名设置文件名命名模块id，而不是以当前文件名命名模块id；
      • 在部分文件不能识别成正确的.js文件，导致会在 xx.js 文件后面加上 .js 成 xx.js.js；
1.3 生成js, css文件的hash映射文件

  • 生成hash映射主要为了区分版本戳

    //js生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revJson', function(){
    return gulp.src(['.build/**/*.{js,css}'])
        .pipe(rev())
        .pipe(rev.manifest('rev-manifest.json'))
        .pipe(gulp.dest('.build'));
});
1.4 更改需要映射的js文件的版本戳（主要针对seajs中的配置）

  • 针对seajs中的配置文件路径添加版本戳

     // 更改需要映射的js文件的版本戳
 gulp.task('revJs', function (cb) {
     jsPaths.seaConfig.forEach(function (item, index) {
         return gulp.src(['.build/rev-manifest.json'].concat(item.entryPath))
             .pipe(revCollector({
                 replaceReved: true
             }))
             .pipe(gulp.dest(item.outputPath))
             .on('end',function() {
                 if (index === (jsPaths.seaConfig.length - 1) ) {
                     console.log( 'revJs 执行完成了' )
                     cb();
                 };
             })
     })
 })
1.5 複製.build目录文件到 build 目錄
// 複製.build目录文件到 build 目錄
gulp.task('copyBuild', function () {
    return gulp.src('.build/**/*.*')
        .pipe(gulp.dest('build'));
});

2. 操作tmpl目录：

  • 该文件目录主要保存的是页面模板文件，包括php和html模板
2.1 复制tmpl模板中的文件 至 tmpl_gulp 文件中
// 复制tmpl模板中的文件 至 tmpl_gulp 文件中
gulp.task('copyTmpl', function () {
    // 1、先忽略需要更改的文件模板，以免发生覆盖
    let nowTmpls = ignorePaths(tmplPaths)
    // 2、再进行copy
    return gulp.src(['../tmpl/**/*.*'].concat(nowTmpls))
        .pipe(gulp.dest('../tmpl_gulp'));
});
2.2 更改tmpl內对应模板文件的CSS，JS版本戳
gulp.task('revHtml', function () {
    buildSlicePaths(tmplPaths, function (path, destPath) {
        return gulp.src(['.build/rev-manifest.json', path])
            // 1.先把文件直接转成utf-8格式
            .pipe(convertEncoding({
                from: 'GBK',
                to: 'utf8'
            }))
            // 2.再去映射修改的文件
            .pipe(revCollector({
                replaceReved: true
            }))
            // 3.再通过utf-8转换成原来的编码格式
            .pipe(convertEncoding({
                from: 'utf8',
                to: 'GBK'
            }))
            // 4.最后生成文件模板
            .pipe(gulp.dest('../tmpl_gulp/' + destPath));
    })
})

打包后目录

打包后目录对比

完整gulpfile.js配置

/**
* @description: 舊框架自動構建配置 - 基於 gulp
* @author:      https://github.com/jeddygong
* @dateTime:    2021-02-29 14:45:02
*/

// 引入 gulp及组件
var gulp    = require('gulp'),
    uglify = require('gulp-uglify'),
    fsCache = require('gulp-fs-cache'),
    pump = require('pump'),
    babel = require('gulp-babel'),
    replace = require('gulp-replace'),
    runSequence  = require('run-sequence')
    minifycss = require('gulp-minify-css');

const path = require('path');

const rev = require('gulp-591-rev');
const revCollector = require('gulp-591-collect');
const seajsCombo = require('gulp-combo-seajs');
const convertEncoding = require("gulp-convert-encoding");

// seajs 的 alias config
const staticConfig = require('./static/alias/static');
const houseConfig = require('./static/alias/house');
const userCenterConfig = require('./static/alias/userCenter');
const configAlias = Object.assign({}, staticConfig, userCenterConfig, houseConfig);

// 當前環境變量
const env = process.env.NODE_ENV

// 環境變量判斷
const env_name = (env === 'develop' ? '.debug' : '')

// 需要copy的include目录下的文件
const copyPaths = {
    paths: [
        '{ajax,bootstrap,css,javascript,static}/**/*.*',
    ]
}

// 需要映射的 php 或 html 文件中的版本戳 文件，添加到paths中即可
const tmplPaths = {
    base:  '../tmpl/',
    paths: [
        'index/house/postRent/index.tpl.php'
    ]
}

// js路径配置
const jsPaths = {
    // 需要添加合并的seajs文件, 只针对页面是使用include/javascript/public/config.js的配置
    manifestPaths: [
        '.build/javascript/newUserCenter/newMedium/index.js'
    ],

    // 基本js文件路径，需要压缩编译的文件
    paths: [
        // javascript 路径下的js文件暂不压缩，要不然会有问题，例子javascript/housing/newList.js
        {
            entryPath: [
                '.build/javascript/**/*.js',
                '!.build/javascript/mobile/preloadData.js',
                '!.build/javascript/house/list.js',
                '!.build/javascript/seajs/**/*.*',
                '!.build/javascript/plugin/*.*',
                '!.build/javascript/newPlugin/*.*'
            ],
            outputPath: '.build/javascript'
        },
        {
            entryPath: ['.build/static/**/*.js'],
            outputPath: '.build/static'
        }
    ],
    // 需要合并添加版本戳替换seajs配置
    seaConfig: [
        {
            entryPath: ['.build/static/alias/static.js', '.build/static/alias/userCenter.js', '.build/static/alias/house.js'],
            outputPath: '.build/static/alias'
        },
        {
            entryPath: ['.build/javascript/public/config.js'],
            outputPath: '.build/javascript/public'
        },
        {
            entryPath: ['.build/javascript/newPublic/dsConfig.js'],
            outputPath: '.build/javascript/newPublic'
        }
    ],
    ignoreConfig: [
        '/include/javascript/jquery.validate.js',
        ...Object.keys(staticConfig)
    ]
}

// 复制include文件下的某些文件至.build，去做构建处理
gulp.task('copyInclude', function (cb) {
    gulp.src(copyPaths.paths)
        .pipe(gulp.dest('.build'))
        .on('end',function() {
            console.log('copyInclude 执行完成了');
            cb();
        })
});

// 处理并压缩css文件；
gulp.task('minifyCSS', function () {
    minifyCSS('{css,javascript,static}/**/*.css', '.build')
})

// 处理并压缩 JS 文件
gulp.task('uglifyJS', ['seaCombo'], function (cb) {
    jsPaths.paths.forEach(function(item,index){
        // index === (jsPaths.paths.length - 1) 解决回调函数次数过多问题，只能回调一次
        uglifyJS(item.entryPath, item.outputPath, index === (jsPaths.paths.length - 1) && cb)
    })
});

// 合併 sea.config 中的alias 的 JS
gulp.task('seaCombo', function (cb) {

    const configAliasArr = Object.keys(configAlias);

    configAliasArr.forEach(function (item, index) {

        // 切割路径有 ? 的时间戳
        let nowItem = configAlias[item].split('?')[0];

        // 从相对路径变成绝对路径
        configAlias[item] = path.resolve(__dirname, nowItem)
        let srcString = configAlias[item];
        let _base;

        const hasStatic = srcString.includes('static');
        const hasJavascript = srcString.includes('javascript');


        if (hasStatic || hasJavascript) {
            _base = (hasStatic && 'static') || (hasJavascript && 'javascript')
        } else {
            return;
        }
        return gulp.src(srcString, { base: _base })
            .pipe(seajsCombo({
                map: configAlias,
                ignore: jsPaths.ignoreConfig
            }))
            .pipe(gulp.dest('.build/' + _base))
            .on('end',function() {
                // console.log( index === (configAliasArr.length - 1) && 'seaCombo 执行完成了' );
                index === (configAliasArr.length - 1) && cb();
            })
    })

});

//js生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revJson', function(){
    return gulp.src(['.build/**/*.{js,css}'])
        .pipe(rev())
        .pipe(rev.manifest('rev-manifest.json'))
        .pipe(gulp.dest('.build'));
});

// 更改需要映射的js文件的版本戳
gulp.task('revJs', function (cb) {
    jsPaths.seaConfig.forEach(function (item, index) {
        return gulp.src(['.build/rev-manifest.json'].concat(item.entryPath))
            .pipe(revCollector({
                replaceReved: true
            }))
            .pipe(gulp.dest(item.outputPath))
            .on('end',function() {
                if (index === (jsPaths.seaConfig.length - 1) ) {
                    console.log( 'revJs 执行完成了' )
                    cb();
                };
            })
    })
})

// 複製.build目录文件到 build 目錄
gulp.task('copyBuild', function () {
    return gulp.src('.build/**/*.*')
        .pipe(gulp.dest('build'));
});

// 复制tmpl模板中的文件 至 tmpl_gulp 文件中
gulp.task('copyTmpl', function () {
    // 1、先忽略需要更改的文件模板，以免发生覆盖
    let nowTmpls = ignorePaths(tmplPaths)
    // 2、再进行copy
    return gulp.src(['../tmpl/**/*.*'].concat(nowTmpls))
        .pipe(gulp.dest('../tmpl_gulp'));
});

// 更改tmpl內对应模板文件的CSS，JS版本戳
gulp.task('revHtml', function () {
    buildSlicePaths(tmplPaths, function (path, destPath) {
        return gulp.src(['.build/rev-manifest.json', path])
            // 1.先把文件直接转成utf-8格式
            .pipe(convertEncoding({
                from: 'GBK',
                to: 'utf8'
            }))
            // 2.再去映射修改的文件
            .pipe(revCollector({
                replaceReved: true
            }))
            // 3.再通过utf-8转换成原来的编码格式
            .pipe(convertEncoding({
                from: 'utf8',
                to: 'GBK'
            }))
            // 4.最后生成文件模板
            .pipe(gulp.dest('../tmpl_gulp/' + destPath));
    })
})


// 默认任务 清空图片、样式、js并重建 运行语句 gulp
gulp.task('default', ['start']);

gulp.task('start', function () {
    console.log('/********************************', new Date().toLocaleString(), '*******************************************/');
    runSequence(
        ['copyInclude'],
        ['uglifyJS', 'minifyCSS'],
        ['revJson'],
        ['revJs'],
        /**
         * 由于更改了revJs任务 jsPaths.seaConfig文件中的版本戳 并且是在revJson之后修改的
         * 导致更改后的rev-manifest.json没有更新到，所以需要再次生成版本戳
         */
        ['revJson'],
        ['copyBuild'],
        ['copyTmpl'],
        ['revHtml']
    );
});

/**
 * JS 壓縮
 * @param {String} path
 * @param {String} destPath
 * @param {回調函數} cb
 */
function uglifyJS (path, destPath, cb) {
    var jsFsCache = fsCache('.gulpCache/jscache');
    pump([
        gulp.src(path),
        jsFsCache,
        babel({
            presets: ['@babel/env'],
            sourceType: 'script' // 簡單理解,不會添加 'use strict'
        }),
        uglify({
            mangle: { reserved: ['require', 'exports', 'module'] }
        }),
        jsFsCache.restore,
        gulp.dest(destPath)
    ],
    cb)
}

/**
 * 壓縮 CSS 公共方法
 * replace(/(..\/){3,5}images\//gi’替换图片路径的正則
 * 匹配 ../../../images/ 字符串內容，../ 是 3~5 個
 * @param {String} path 目標路徑
 * @param {String} destPath 輸出路徑
 */
function minifyCSS (path, destPath) {
    var cssFsCache = fsCache('.gulpCache/csscache');
    gulp.src(path)
        .pipe(replace(/(..\/){3,5}images\//gi, `//images${env_name}.591.com.tw/`))
        .pipe(cssFsCache)
        .pipe(minifycss({
            compatibility: 'ie9'
        }))
        .pipe(cssFsCache.restore)
        .pipe(gulp.dest(destPath));
}

/**
 * @description 需要忽略的文件不被copy，解决gulp的task任务异步问题
 * @param   {Array}     manifestPaths    所有忽略的文件路径
 * @return  {Array}
 */
function ignorePaths (manifestPaths, base) {
    return manifestPaths.paths.map(function(item,index){
        return '!'+ manifestPaths.base + item;
    })
}

/**
 * @description 需要打包的文件路径做切割
 * @Example 'javascript/newUserCenter/newMedium/index.js' => 'javascript/newUserCenter/newMedium' 和 'index.js'
 * @param   {Array}     manifestPaths    所有忽略的文件路径
 * @param   {Function}  cb
 */
function buildSlicePaths (manifestPaths, cb) {
    manifestPaths.paths.forEach(function(item,index){
        let name = item.split('/').length - 1;
        // 查找最后一个/的位置
        let sub = item.lastIndexOf('\/');
        let destPath = '';
        if (sub) {
            destPath = item.slice(0, sub);
        }
        cb(manifestPaths.base + item, destPath, index);
    })

}
阿彪师傅
关注
专栏目录
gulp-tree-concat:一个 Gulp 处理器，用于将多个 JavaScript 文件合并为一个具有层次结构的文件
06-13
gulp-tree-concat 一个处理器，用于将多个 javascript 文件合并为一个具有层次结构的文件 安装 使用安装。 $ npm install gulp-tree-concat 用法 var jade = require ( 'gulp-jade' ) , treeConcat = require ( 'gulp-tree-concat' ) gulp . task ( 'template' , function ( ) { gulp . src ( 'client/templates/**/*.jade' ) . pipe ( jade ( { client : true , compileDebug : false } } ) ) . pipe ( treeConcat ( { output : 'template.j
gulp基于seaJs模块化项目打包实践
weixin_34377919的博客
05-15 127
一：devDependencies依赖了解gulp的肯定对npm都有所了解，在这里就不再赘述，直接贴依赖包。"devDependencies":{ "gulp":"^3.9.1", "gulp-autoprefixer":"^3.1.1", "gulp-clean":"^0.3.2", "gulp...
介绍一种基于gulp对seajs的模块做合并压缩的方式
weixin_34411563的博客
06-14 107
之前的项目一直采用grunt来构建，然后用requirejs做模块化，requirejs官方有提供grunt的插件来做压缩合并。现在的项目切到了gulp，模块化用起了seajs，自然而然地也想到了模块合并压缩的问题。然后一开始在解决这个问题的时候，并不是很顺利，在npm上并没有那种特别流行的专门用来做seajs合并压缩的gulp插件，虽然在seajs的github上也看了不少的issue，但是大多...
gulp构建seajs模块案列
09-09
使用gulp-cmd-pack自动提取依赖、合并压缩seajs模块案例
gulp打包seajs，用gulp-cmd-pack打包seajs模块
kongjiea笔记
09-09 5521
html代码： seajs和requirejs的区别 seajs.use('./c'); a ,b,c 三个js模块代码如下： adefine(function(require,exports,module) { function fn(){ console.log("hello module a"); }
基于gulp合并压缩Seajs模块的方式说明
10-22
虽然在npm上并没有特别流行的专门用来做Sea.js模块合并压缩的gulp插件，但gulp-seajs-transport和gulp-seajs-concat这两个插件可以解决这个问题。gulp-seajs-transport插件用于在gulp流程中处理Sea.js的模块依赖和...
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
10-19
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解主要介绍了在Angular.js项目中使用gulp工具进行自动化构建、压缩、打包的详细步骤和方法。gulp是一个基于流的前端自动化构建工具，利用它能够有效提升前端...
gulp安装以及打包合并的方法教程
10-18
gulp是前端开发中广泛使用的自动化构建工具，它可以帮助开发者完成诸如合并、压缩、预处理等多种任务，极大地提高了工作效率。本文将详细介绍如何安装gulp并使用它进行打包和合并操作，特别是针对JavaScript和CSS...
gulp-seajs-combine:gulp的插件以构建seajs模块
05-19
＃＃＃选项根据别名除了：不合并的模块＃＃＃例子 gulp.task('seajs', function(){ return gulp.src(['./src/page/homepage/index.js'], {base: './src'}) .pipe(seajs(null, { base: '../../mods/', alias: { zepto...
gulp结合seajs开发
我是新手F1的专栏
01-25 1126
上一篇说了gruntjs结合seajs开发，这一节我们来说一下gulp结合seajs是怎么开发的。 其实gruntjs和gulp在前端开发中的作用是一样的，都是自动化项目的前端构建利器，那么它们有什么不一样呢？Grunt主要是以文件为媒介来运行它的工作流的，比如在Grunt中执行完一项任务后，会把结果写入到一个临时文件中，然后可以在这个临时文件内容的基础上执行其它任务，执行完成后又把结果写入到临
html5 模块化打包发布,gulp基于seaJs模块化项目打包实践
weixin_29526313的博客
06-18 110
一：devDependencies依赖了解gulp的肯定对npm都有所了解，在这里就不再赘述，直接贴依赖包。"devDependencies":{"gulp":"^3.9.1","gulp-autoprefixer":"^3.1.1","gulp-clean":"^0.3.2","gulp-cleanhtml":"^1.0.1","gulp-cssimport":"^5.0.0","g...
利用 gulp 来合并seajs 的项目
weixin_30667301的博客
02-16 84
gulp-seajs-transport 和 gulp-seajs-concat这两个gulp插件 gulp-seajs-transpor 这个插件这样是给每个js模块 标示 模块名称 gulp-seajs-concat 这个插件是从入口文件开始合并所以引入的js http://www.cnblogs.com/lyzg/p/5581961.html 转载于:https://www...
为什么 SeaJS 模块的合并这么麻烦
hsany330的专栏
11-24 1004
引子 最近看到身边很多同学开始抛弃传统的  而改用 SeaJS 这样的 JS 模块加载器了，这是件好事，也是一种趋势。 但是任何事物都有两面性，使用模块加载器虽然对于代码的可维护性带来了较大的提升，但是也引入了更多的复杂度，所以肯定会给某些方面带来麻烦——比如这篇文章要探讨的 JS 文件合并。 不少人知道 SeaJS 有个配套的文件压缩合并工具 Spm，可是这个工具似乎一直各种调整、跳票
使用 gulp-seajs-combo 合并 seajs 模块
365Marathon
11-10 865
在之前的 前端自动化构建和发布系统的设计（一） 中我有提到过使用 gulp-seajs-combo 合并 JS 模块的问题。在那篇文章中只提供了简单的 demo，当然在 github 上有详细的文档以及测试用例，尽管如此，还是会有人对使用会有诸多疑惑，希望能在看完此文后对使用 gulp-seajs-combo 合并 seajs 模块有更深入的了解。 无论是使用什么样的模块化开发模式，不管
seajs和requiejs的区别，和用gulp打包方法
kongjiea笔记
09-09 5059
1、执行顺序不同  从demo.html 引入一个入口c.js，  c.js require-b.js  ,  b.js require - a.js 代码如下： c module define(function(require, exports, module) { console.log("hello module c"); require('b'); c
gulp 压缩打包js文件、gulp方法
weixin_43294560的博客
02-10 1981
gulp的方法 gulp.task(str,fn) 创建一个gulp任务 gulp.src(path) 文件来源 gulp.dest(path) 操作之后的文件到哪里去 .pipe(package) 执行一个gulp功能 gulp.watch() 监听 gulp.start() 执行gulp任务 插件 1、压缩js文件 ...
用gulp做一个略完整的前端打包工作
本本技术
05-22 568
  我们的官网要改版，会从以前的单一产品变成系列产品的官网，也就是现在的官网会是之后官网的一个子模块。 趁着这个机会，正好重新梳理了一下结构。加上罪恶之主管的一些要求，具体的需求如下： 分模块，每个模块都有独立的页面和静态文件，并将所有静态文件打在一个文件夹下， 一些常用变量可以进行替换，并可进行简单的页面动态生成， 生产环境打包与线上环境打包分开进行， 静态文件进行压...
gulp实战(1) - 自动化打包JS文件（完整版）
死牛胖子的技术随笔
10-24 3026
1. 打包时，build目录中可能已经存在上一次打包生成的旧文件，所以每次打包都应该先清理掉。 2. 打包时需要执行压缩操作 3. 打包时需要执行文件更名操作，比如：app.js 压缩后的文件名应该为 app.min.js 4. 打包后，每次修改 src 目录下的 JS 文件，应该即时将修改部分重新打包 5. 打包时的执行顺序为：清理 -> 打包 -> 监控修改，而且后一步必须在前一步操作完成后才可以执行。
使用gulp实现Seajs模块的按需合并与压缩
本文主要讨论如何在基于gulp的工作流中实现Seajs模块的合并与压缩，针对多页面应用的需求，强调按需加载和优化浏览器缓存的策略。 在前端开发中，构建工具如grunt和gulp常用于自动化任务，包括JavaScript文件的管理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值