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. DRBD（数据镜像）+hearbeat（自动切换）

    DRBD 数据镜像软件 一.DRBD介绍 1.1.数据镜像软件DRBD介绍 分布式块设备复制(Distributed Relicated Block Deivce,DRBD),是一种基于软件.基于网络 ...

  2. [转] WebService开发笔记 1 -- 利用cxf开发WebService竟然如此简单

    以下文章来自   http://www.blogjava.net/jacally/articles/186655.html 现在的项目中需要用到SOA概念的地方越来越多,最近我接手的一个项目中就提出了 ...

  3. Ubuntu“无法解析或打开软件包的列表或是状态文件”的解决办法。_StarSasumi_新浪博客

    Ubuntu"无法解析或打开软件包的列表或是状态文件"的解决办法. (2011-04-30 14:56:14) 转载▼ 标签: ubuntu apt 分类: Ubuntu/Linu ...

  4. [Unity Shader]Shader前述

    什么是Shader   Shader,也就是着色器,它的工作就是读取你的网格并渲染在屏幕上.Shader可以定义一些属性,你会用它来影响渲染模型时所显示的效果.当存储了这些属性的设置时,就是一个Mat ...

  5. D. PolandBall and Polygon BIT + 欧拉公式

    http://codeforces.com/contest/755/problem/D // 我也觉得非平面图不能用欧拉公式,但是也能过,不知道为什么.求大佬留言. 这题其实就是平面图,因为它有很多个 ...

  6. MySQL引擎简述

    MySQL数 据库引擎取决于MySQL在安装的时候是如何被编译的.要添加一个新的引擎,就必须重新编译MYSQL.在缺省情况下,MYSQL支持三个引擎:ISAM.MYISAM和HEAP.另外两种类型IN ...

  7. LPC1788定时器使用

    #ifndef __TIM_H_ #define __TIM_H_ #include "common.h" extern u8 tim1_mr0_flag; void tim0_c ...

  8. mysql中TPS, QPS 的计算方式

    今天突然有个同事问题一个问题, mysqlTPS和QPS的计算公式是什么? 以前确实也没有关注过这个计算公式,所以查了下学习了下: 下面是参考内容.  在做db基准测试的时候,qps,tps 是衡量数 ...

  9. 【转】C++ 11 右值引用的理解

    右值引用的目的之一,是为了C++中一个比较影响性能的问题:拷贝临时对象,例如,在 int foo(){ ... } int x; x = foo(); 中,在第三句中,发生了以下的事情: 1.销毁 x ...

  10. eclipse安装maketplace插件

    对于默认eclipse是没有marketplace插件的,但是marketplace确实是非常好用的,可以在上面下载各种插件. 1.Help-->Install new Software 2.输 ...