现在很多人都在用seaJs来开发项目,seaJs上手容易,操作简单.但在后期做合并压缩的时候却中了个巨大无比的坑,但坑也总得有人来填.于是花了将近一个星期的时间来填了这坑,现将填坑的一些心得与大家分享.在网上搜了下相关的资料,不得不说网上资料很多的坑(都是复制别人的...),说多都是泪.下面总结下已找到的seaJs合并压缩的几种办法,让中坑的人尽快脱坑. 第一种: 在seaJs的官网上有他自带的一个seajs-combo插件.看似不错,和minify差不多.这种方法比较简单粗暴:下载个JS文件引…

1.文件合并压缩 var concat = require(‘gulp-concat’); //引用 var uglify = require(‘gulp-uglify’);  接下来,只要concat(‘xxx.js’)就算合并了.注意此时只是在内存中生成 前面我们学过管道的概念,因此代码整合非常简单  gulp.src([这里写上js]).pipe(concat(‘xxx.js’)).pipe(uglify()).pipe(gulp.dest(‘目录’)) 2.gulp-useref进行资源…

今天不讲webpack,就说说gulp是怎么进行压缩合并打包 首先你的安装gulp : npm install gulp -g --save-dev 然后最基本的你因该知道gulp 的四个方法, gulp.src:读取文件 gulp.pipe:将文件流输入到指定的文件目录 gulp.task:建立gulp任务,例如合并,压缩,清除文件, gulp.watch:用于监听文件的变化 关于其他的嘛,那就是gulp 之所以那么强大,原因就是他有很多插件,我们要完成一些功能就必须要学会使用一些插件 1)在…

之前的项目一直采用grunt来构建,然后用requirejs做模块化,requirejs官方有提供grunt的插件来做压缩合并.现在的项目切到了gulp,模块化用起了seajs,自然而然地也想到了模块合并压缩的问题.然后一开始在解决这个问题的时候,并不是很顺利,在npm上并没有那种特别流行的专门用来做seajs合并压缩的gulp插件,虽然在seajs的github上也看了不少的issue,但是大多数都是只能将所有的模块文件合并成一个总的文件,这对于单页面的应用来说肯定没有问题,但是对于多页面的应…

最近研究了一下gulp构建工具,发现使用起来比grunt顺手一些.(个人感受),以下是grunt和gulp构建方式和原理: grunt 基于文件方式构建,会把文件先写到临时目录下,然后进行读文件,修改文件,写文件,,,读文件,修改文件,写文件..... 需要进行大量IO操作. gulp 基于流(streaming)的方式构建,首先读取文件,编译压缩文件(流的方式),最终将结果生成到配置的文件目录下. 安装gulp 假设已经安装了node 和npm (淘宝的cnpm很适合国内使用). 1.首页全局…

前言 这篇文章本应该在去年17年写的,但因为种种原因没有写,其实主要是因为懒(捂脸).gulp出来的时间已经很早了,16年的时候还很流行,到17年就被webpack 碾压下去了,不过由于本人接触gulp的时候比较晚,16年的时候才听说有这么个玩意,正真用它是在17年的时候,但是虽然现在webpack已经大行其道,我们每个人都 在积极去拥抱它,不过gulp在现在来说也并不是一无是处,还是有用到的地方,所以,这篇文章我觉得还有有必要写的,就当做是为gulp写的最后一篇文章吧 ,做技术就是 这么辛苦,…

1 概述 最新使用AngularJS框架做单页面项目,其中包括了很多库的和自已写的js.css.img文件,这些文件都不大,但是数量众多,导致web请求文件过多,一次性加载时比较慢.有尝试过使用异步加载,但因为AngularJS对异步加载不是很好,需要引入第三方库,会更复杂,而且文件数量没有减少,本质上没有变.然后通过尝试合并压缩js/css.压缩img来减少文件数量和文件大小,最终使得加载速度大大提高.下面记录一下整个优化的过程. 2 步骤摘要 (1)安装nodejs (2)安装gulp及其他…

//导入工具包 require('node_modules里对应模块') var gulp = require('gulp'), //本地安装gulp所用到的地方 concat = require('gulp-concat'),//合并文件 --合并只是放一起--压缩才会真正合并相同样式 less = require('gulp-less'),//编译less文件 cssmin = require('gulp-minify-css'),//压缩css文件 rename = require('gu…

前端自动化(三)   合并压缩css.压缩js.添加时间戳.打包上线操作 此文在前两篇基础上对比参考,会很方便理解 gulp.task("delete",function(){ return del("./dist/") console.log("delete is end");});译:删除不需要的gulp.task("copyHtml",function(){ return gulp.src("./dev/*.h…

2017-01-06 更新 在 BundleCollection 的构造函数中添加了 3种默认规则 public BundleCollection() { BundleCollection.AddDefaultFileExtensionReplacements(this.FileExtensionReplacementList); //文件扩展名替换规则 BundleCollection.AddDefaultFileOrderings(this.FileSetOrderList);//排序规则…