gulp的使用命令简单,就几个,gulp的简单使用教材可以参考一点的gulp使用教材(http://www.ydcss.com/archives/18)。

下面就简单的介绍这些命令如何互相配合的完成前端的构建工作。

项目结构:

首先全局安装gulp,使用命令:npm install -g gulp

一:gulp实时编译less

var gulp = require('gulp');
var gulpLess = require('gulp-less');
var gulpMinifyCss = require('gulp-minify-css');
var gulpSourcemaps = require('gulp-sourcemaps');

  这4个插件就是目前用到的,需要其他功能可以自己添加。gulp-less是编译less用的插件,gulp-minify-css是压缩css的插件,gulp-sourcemaps是便于压缩后代码调试的。

gulp.task('allLess', function(){
gulp.src('src/less/**/*.less')
.pipe(gulpSourcemaps.init())//sourcemaps
.pipe(gulpLess())//编译less
.pipe(gulpSourcemaps.write())
.pipe(gulp.dest('src/css/'))
.pipe(gulpMinifyCss())//压缩css
.pipe(gulpSourcemaps.write())
.pipe(gulp.dest('dist/css/'));
}); gulp.watch('src/less/**/*.less', ['allLess']); gulp.task('default', ['allJs', 'allLess']);
gulp.src('src/less/**/*.less'):src/less/下任意目录下的less文件,**代表任意单个或多个目录,*.less表示已less后缀结尾的文件。
gulp.watch('src/less/**/*.less', ['allLess']);这条是监听src/less目录下的任意less文件的变化,有变化就会调用allLess任务编译变化的less文件。

 gulp实时编译less就是这么简单了。还可以加入对图片的压缩控制。

二:gulp压缩合并requirejs加载的js模块文件

在前端代码量越来越多的情景下,js模块化编程孕育而生,AMD模式的模块采用requirejs来加载模块。模块化编程让前端js代码规范整洁之外,也导致了浏览器对

js请求数量增多,这个时候,就需要对相应的模块进行合并,并且压缩代码,减少请求,缩短页面响应时间。

一些需要的模块:

var fs = require('fs');
var paths = require('path');
var rjs = require('requirejs');

合并压缩用的是requirejs的optimize方法,

先定义一些变量:

// 配置目录
var jsDir = 'src/js'; // 所有要编译的js模块
var jsModules = [], ctrlModules = [],
commModules = [
{
name: "lib/common",
exclude: []
}
];

合并压缩代码的思路就是要告诉requirejs哪些模块需要合并到文件中,哪些模块要单独打包,不用合并到文件中,并且单独请求。也就是要先遍历你的逻辑js文件,

把名称和需要过滤的模块名称存到变量中,然后传递给requirejs的optimize方法。下面是变量controller下的js文件。

// 初始化controller下所有要编译的js模块
function initJsPath(path){
path = path || jsDir + '/controller';
var files = fs.readdirSync(path);/*读取目录下的所有文件名称,返回名称数组,如果文件名是目录,该目录下面的文件不会读取*/
console.log(files);
files.forEach(function(item) {
var tmpPath = path + '/' + item,
stats = fs.statSync(tmpPath);
if (stats.isDirectory()) {//目录
initJsPath(tmpPath);
} else {//文件
if (tmpPath.slice(-3)=='.js') {
ctrlModules.push({
name: tmpPath.slice(jsDir.length + 1, -3),
exclude: ['lib/common']
});
}
}
});
console.log(ctrlModules);
}

gulp中定义的任务是:

gulp.task('allJs', function(cb){
console.log('======================================= start optimize js ==========================================');
//收集js文件名称
initJsPath(); jsModules = commModules.concat(ctrlModules); rjs.optimize({
baseUrl: 'src/js',
dir: 'dist/js',
findNestedDependencies : false, //代码内部写的require也计算在打包内
preserveLicenseComments : false, //去掉头部版权声明
removeCombined: false, //自动删除被合并过的文件
modules: jsModules
}, function(){
cb();
}, cb); });

baseUrl目录下的文件都会被压缩,modules中的模块会被合并并且压缩,合并压缩后存储到dist/js目录下面。commModules中存储的是我们项目的公共模块文件,

需要单独合并压缩抽离出来,这个文件不会被合并到其他模块文件中,而且会被单独请求。相关参数的配置信息大家可以看官网。

下面看看实验:

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
window.ENV = 1;
</script>
<body>
<p class="msg">hello rjs</p>
</body>
<script src="src/js/require.js"></script>
<script>
require(['src/js/config.js'], function(){
require(['controller/order/orderDetail']);
});
</script>
</html>

requirejs 的config配置文件:

/**
* Created by jiaan.zhou on 2017/2/3.
*/ var BASEURL = ((window.ENV == 1) || (window.ENV == 2 && location.hash === '#debugon')) ? 'src/js': 'dist/js'; require.config({
waitSeconds: 2000,
baseUrl : BASEURL,
paths : {},
urlArgs : 'v=' + new Date().getTime()
});

没有合并的orderDetai.js文件:

/**
* Created by jiaan.zhou on 2017/2/3.
*/
define('controller/order/orderDetail', ['widget/swipe'], function(widgetSwipe){
console.log('controller/order/orderDetail');
$('.msg').html('success');
});

合并后的orderDetai.js文件:

define("widget/swipe",["lib/common"],function(e){function o(){this.name="swipe",console.log("hello swipe")}return new o}),define("controller/order/orderDetail",["widget/swipe"],function(e){console.log("controller/order/orderDetail"),$(".msg").html("success")});

没有合并模块之前的请求:

从图中我们可以看到所有的模块按照加载顺序进行请求,每个模块对应一个请求。

合并模块后的请求:

合并后,swipe模块已经合并到orderDetai文件中,zepto和fastclick模块合并到commonjs文件中,这样就减少的请求,而且代码也得到压缩。

写的不好,还请大家多多指正,任何问题请联系:QQ  272318930

gulp实时编译less,压缩合并requirejs模块文件的更多相关文章

  1. gulp之css,js压缩合并加密替换

    为了防止客户端的静态资源缓存,我们需要每次更新css或js的时候,通过md5或时间戳等方式重新命名静态资源.让客户端可以重新请求资源,而不是从缓存里取.然后html模板里的src也要做相应的修改.当然 ...

  2. gulp打包js/css时合并成一个文件时的顺序解决

    1.可以使用插进gulp-order. 2.可以这样的写法: return gulp.src(['js/common.js','js/**/*.js']) .pipe(concat('build.js ...

  3. gulp构建前端,压缩css,js文件,实现浏览器自动刷新

    一.安装node nodejs下载地址:https://nodejs.org/ nodejs自带npm模块管理器,安装完成之后打开dos命令窗口输入 node -v就能查看nodejs是否安装成成功 ...

  4. gulp完成javascript压缩合并,css压缩

    最近需要对项目进行优化,主要是对js的压缩合并和css文件的压缩,查找相关资料之后发现gulp可以实现相关的功能,特此分享一下使用心得. 1.安装gulp gulp是基于Node.js的前端构建工具. ...

  5. 编写gulpfile.js文件:压缩合并css、js

    使用gulp一共有四个步骤: 1. 全局安装 gulp: $ npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: $ npm inst ...

  6. ASP.NET MVC 中CSS JS压缩合并 功能的使用方法

    通过压缩合并js文件和css文件,可以减少 服务器的响应 次数和 流量,可以大大减小服务器的压力,对网站优化有比较明显的帮助!压缩合并 css 文件和js文件是网站优化的一个 比较常用的方法. ASP ...

  7. 第十一节:Bundles压缩合并js和css及原理分析

    一. 简介 1.背景:浏览器默认一次性请求的网络数是有上限的,如果你得js和css文件太多,就会导致浏览器需要多次加载,影响页面的加载速度, MVC中提供Bundles的方式压缩合并js和css,是M ...

  8. gulp之压缩合并MD5清空替换加前缀以及自动编译自动刷新浏览器大全

    gulp是基于流的前端构件化工具.目前比较火的前端构建化工具还是挺多的,grunt gulp fis3等等. 这个鬼东西有什么用?请参考https://www.zhihu.com/question/3 ...

  9. gulp css 压缩 合并

    //导入工具包 require('node_modules里对应模块') var gulp = require('gulp'), //本地安装gulp所用到的地方 concat = require(' ...

随机推荐

  1. DNS服务器搭建(主、从、缓)

    主dns服务器搭建 在本机上搭建一个管理hngd.com域名的域名服务器1. 确保安装好以下bind域名服务器 [root@主人 ~]# rpm -qa |grep ^bindbind-chroot- ...

  2. team talk 主要框架

    Android TeamTalk的原型是Android-IM, 注:本文假设你已经有Android开发环境,且对Android开发的基本常识有所了解 本文以eclipse为例启动Eclipse,导入A ...

  3. phpMyAdmin安装与配置(涉及LAMP配置)

    作者:zccst 安装一个phpMyAdmin还真麻烦,遇到很多问题.不过在解决过程中发现,PHP的水还真深,不是短时间可以看透的. 1,下载 建议去百度软件中心下载 2,使用 (1)解压后,复制配置 ...

  4. matlab获取向量中出现次数最多的元素

    向量X 1. tabulate(X) 返回一个矩阵:第一列为元素值,第二列为相应元素出现个数,第三列为相应元素个数占所有元素个数百分比 table = tabulate(X); %获取出现次数最多的元 ...

  5. STM32标准IIC驱动

    IIC(Inter-Integrated Circuit)总线是一种由 PHILIPS 公司开发的两线式串行总线,用于连接 微控制器及其外围设备.也是目前很流行的通讯总线,使用IIC总线做产品能够很大 ...

  6. python内置函数all使用的坑

    在代码的改造过程中,因为忽略了一个问题导致数据异常,在改造的过程中以及后续的review中都没注意到这个问题,单元测试也没有覆盖到,记录如下.这个坑在于all的使用上,如果参数为空元组或空列表时,返回 ...

  7. bootstrap tab标签页

    <ul id="myTab" class="nav nav-tabs"> <li class="active"> & ...

  8. adapter中报错:Can't create handler inside thread that has not called Looper.prepare()

    http://stackoverflow.com/questions/9357513/cant-create-handler-inside-thread-that-has-not-called-loo ...

  9. C语言-结构体

    C语言中数组是把相同类型的数据类型的变量集中在一起了,而结构体则是把不同类型的变量聚集在一起. 结构体也是一种数据类型,但是它是一种自定义的数据类型,也就是说和使用其他数据类型不一样,我们得先定义这种 ...

  10. shell 脚本连接mysql数据库查询database中表的数量和表名

    #!/bin/bash MYSQLHOST="127.0.0.1" MYSQLUSER="root" MYSQLPWD="root" MYS ...