最近使用gulp工具，将公司现有项目重新构建了下，有许多大改动，绕了许多坑，我不擅长表达，只能把我现在总结出的对的和比较深刻的应该注意的几点记录下来，免得以后自己都忘记了。一，基本环境的搭建，安装nodejs、npm。（给新手看得，会的直接跳过）先下载安装程序：http://nodejs.cn/download/
1、Windows 安装包(.msi)；
2、安装msi，这里最好使用管理员命令行来进行安装3、安装完后配置环境变量（注意新版的node会帮忙修改好环境变量）
新建一个用户变量：
变量名：NODE_PATH
值：C:\Program Files\nodejs\node_modules
系统变量修改（node安装时会给改好）
变量名：path
值：添加 C:\Program Files\nodejs
3、检测PATH环境变量是否配置了Node.js，点击开始=》运行=》输入"cmd" =& 输入命令"path"4、在命令提示符窗口输入 node -v 和 npm -v 检查安装的版本号二、使用npm安装gulp已经各种需要的gulp包1.先生成package.json ，命令： npm init
2.安装gulp，全局安装
命令： npm install gulp -g
3.安装所需要的gulp包：
npm install gulp gulp-clean gulp-htmlmin gulp-imagemin gulp-less gulp-minify-css gulp-rename gulp-rev gulp-rev-collector gulp-seajs-concat gulp-seajs-transport gulp-sourcemaps gulp-uglify merge-stream yargs
4.安装完成后，package.json的文件内容，其中devDependencies 如下图三、目录结构，这个东西，根据自己的来的，在配置gulpfile文件的时候对应好就行四、编写配置文件gulpfile，我直接上代码吧，然后再解释var gulp = require('gulp'),
yargs = require('yargs').argv,
imagemin = require('gulp-imagemin'),
less = require('gulp-less'),
minifyCss = require('gulp-minify-css'),
sourcemaps = require('gulp-sourcemaps'),
jshint = require('gulp-jshint'),
transport = require('gulp-seajs-transport'),
concat = require('gulp-seajs-concat'),
uglify = require('gulp-uglify'),
merge = require('merge-stream'),
replace = require('gulp-replace-task'),
htmlmin = require('gulp-htmlmin'),
rename = require('gulp-rename'),
clean = require('gulp-clean');
var rev = require('gulp-rev');
var revCollector = require('gulp-rev-collector');
gulp.task('allLess', function(){
return gulp.src(['./assets/less/*.less','!./assets/less/reset.less'])
.pipe(sourcemaps.init())
.pipe(less())
.pipe(gulp.dest('./assets/css'))
.pipe(minifyCss())
.pipe(rev())
.pipe(sourcemaps.write())
.pipe(gulp.dest('./dist/css/'))
.pipe(rev.manifest())
.pipe(gulp.dest('./dist/rev/css'));
gulp.task('image', function(){
var imgSrc = './assets/image/**/*',
imgDst = './dist/image';
gulp.src(imgSrc)
.pipe(imagemin())
.pipe(gulp.dest(imgDst));
gulp.task('seajs', function(){
return merge(
gulp.src('./assets/scripts/!(lib)/**/*.js', {base: './assets/scripts'})
.pipe(transport())
.pipe(concat({
base: './assets/scripts'
.pipe(gulp.dest('./dist/js_tmp'))
gulp.task('scripts_uglify', ['seajs'], function(cb){
return gulp.src([
'./dist/js_tmp/app/**/*.js'
], {base : './dist/js_tmp'})
.pipe(uglify({
except: ['require', 'exports', 'module', '$', 'Zepto', 'jQuery', '_hmt']
.pipe(rev())
.pipe(gulp.dest('./dist/scripts'))
.pipe(rev.manifest())
.pipe(gulp.dest('./dist/rev/js'))
gulp.task('html', ['allLess', 'scripts_uglify'], function () {
var options = {
removeComments: true,
collapseWhitespace: true,
collapseBooleanAttributes: true,
removeEmptyAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
minifyJS: true,
minifyCSS: true
gulp.src(['./dist/rev/**/*.json', './assets/*.html'])
.pipe(revCollector({
replaceReved: true,
dirReplacements: {
'css/': 'css/',
'scripts/': 'scripts/'
.pipe(htmlmin(options))
.pipe(gulp.dest('./dist'));
gulp.task('watch', function(){
gulp.watch('./assets/*.html',['html']);
gulp.watch('./assets/less/*.less',['allLess']);
gulp.watch('./assets/scripts/**/*.js',['scripts_uglify']);
gulp.watch('./assets/image/**',['image']);
gulp.task('clean', function(){
gulp.src([
'./dist/css/!(font)',
'./dist/scripts/!(lib)',
'./dist/*.html',
'./dist/js_tmp',
'./dist/image',
'./dist/rev',
'./assets/css/!(font)'
], {read: false})
.pipe(clean());
gulp.task('default', ['clean'], function(){
gulp.start('allLess', 'scripts_uglify', 'image', 'html');
});首先是顶部的那一堆变量的声明，其实可以使用个更简单的方式，gulp-load-plugins，这个插件，使用方法入口：下面对各个任务做个简单解释：五、在js代码中需要注意的事情，这个很重要！！1.首先是seajs的配置，我把seajs.config的配置写在了script/lib/下的sea.js文件里了，同时还有接口服务器地址配置也在这里。这是因为公司项目环境导致测试环境和正式环境的配置文件都是稳定不变得，即使在开发中也是这样，之前在gulp的配置文件gulpfile.js中也强调过，这个script/lib/下的文件是不做修改，不做处理的，用于客户端缓存，方便读取；2.seajs是按模块按需加载的，在define的时候，可以给模块定义名称，用来调用（如下图），这样在gulp后的js文件基本不会有问题；六、由于使用的是less，所以在开发中可以使用gulp实时刷新的插件（gulp-connect），用户方便查看网页也可以使用工具，将less生成css文件，我用的工具是WinLess，感觉很好用，工具安装文件地址：，同样是msi文件，最后用管理员模式命令行启动
一种基于gulp对seajs的模块做合并压缩的方式
1. 合并思路2. 本文小结http://www.cnblogs.com/lyzg/p/5581961.html
之前的项目一直采用grunt来构建，然后用require...
gulp结合seajs开发
上一篇说了gruntjs结合seajs开发，这一节我们来说一下gulp结合seajs是怎么开发的。
其实gruntjs和gulp在前端开发中的作用是一样的，都是自动化项目的前端构建利器，那么它们有什么...
seajs和requiejs的区别，和用gulp打包方法
1、执行顺序不同
从demo.html 引入一个入口c.js，
c.js require-b.js
b.js require - a.js
代码如下：
define(fu...
如何改造现有文件为 CMD 模块 #971
https://github.com/seajs/seajs/issues/971
* 使用步骤。1，引入seajs
2、定义define模块
3、 模块的调用 seajs.use
4 如何依赖模块(模块之间的依赖) require()
* 步骤二：define参数说...
html代码：
seajs和requirejs的区别
seajs.use('./c');
a ,b,c 三个js模块代码如下：
adefine(f...
Sea.js 手册与文档
首页 | 索引
seajs.useseajs.configdefinerequirerequire.asyncexport...
今天在使用sea.js的时候，出了一个BUG，这个BUG很诡异。没有任何报错。只是没有加载任何模块代码。心里估量着应该是sea.js出错了。但是具体原因我搞了好久才搞清楚。于是今天在这里记录一下。下面...
一、什么是Gulp?
Gulp是新一代前端项目构建工具，可以使用Gulp及其插件对你的项目代码（less,sass）等进行编译，还可以压缩你的js和css代码，甚至是压缩你的图片，Gu...
你真的需要Grunt和Gulp吗
前些天看到一篇不错的文章 http://blog.keithcirkel.co.uk/why-we-should-stop-using-grunt/作者的观点是前端程序员不应该使用Grunt和Gulp...
没有更多推荐了，browserify / webpack / seajs / requirejs ，这四个都是JS模块化的方案，Gulp是一个工具。其中seajs / require 是一种类型，browserify / webpack 是另一种类型。
browserify / webpack / seajs / requirejs 的简单区分：
seajs / require : 是一种在线"编译" 模块的方案，相当于在页面上加载一个 CMD/AMD 解释器。这样浏览器就认识了 define、exports、module 这些东西。也就实现了模块化。
browserify / webpack : 是一个预编译模块的方案，相比于上面 ，这个方案更加智能。以webpack为例。首先，它是预编译的，不需要在浏览器中加载解释器。另外，你在本地直接写JS，不管是 AMD / CMD / ES6 风格的模块化，它都能认识，并且编译成浏览器认识的JS。
Gulp是一个工具，而seajs / require/browserify / webpack 是模块化方案。Gulp也可以配置seajs、requirejs甚至webpack的插件。
Gulp合并requirejs并MD5文件
项目目录结构可以从https://github.com/muchstudy/GulpDemo 这里下载样例代码，求Star!
1. js的的依赖关系为main.build.js–&thre...
gulp- require-dir
Splitting a gulpfile into multiple files
20th January, 2015
In some projects, your gulpfile will...
Gulp,grunt,seajs/require和browserify/webpack的区别？
Gulp / Grunt 是构建工具，可以配合各种平台上的插件做js压缩，各种css编译，页面自动刷新，检查语法等，替代手工实现自动化开发
seajs/require和browserify/webp...
前端的四种模块化方案(webpack/require.js/seajs/browserify
http://hackhat.com/p/110/module-loader-webpack-vs-requirejs-vs-browserify/
https://zhidao.baidu.com...
gulp、requirejs、webpack之间是什么关系
gulp、requirejs、webpack之间是什么关系
AMD与CMD分别为模块化规范
requirejs和seaJs分别为实现规范的一种方案。
在线编译模块方案：在工程中引入了requ...
前端模块化方案的比较(webpack/require.js/seajs/browserify
采用第三方开发的模块依赖处理库来实现模块化：AMD、CommonJS、ES6
这三种方案的实现对比：
AMD: define + require
CMD: exports + require
使用webpack合并js文件
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。在代码实践之前，先说一写webpack的基础知识。1、为什要使用Web...
转自 http://www.cnblogs.com/lovesong/p/5861932.html
作者：海角在眼前
browserify学习总结
在未接触bro...
包括js模块化，js压缩，css压缩，html模块化等。github源码地址：https://github.com/xutongbao/gulp-es61.目录结构2.index.html&l...
1、执行顺序不同
从demo.html 引入一个入口c.js，
c.js require-b.js
b.js require - a.js
代码如下：
define(fu...
没有更多推荐了，gulp模块的src方法，用于产生数据流。它的参数表示所要处理的文件，这些指定的文件会转换成数据流。
js/app.js 指定确切的文件名
js*.js 某个目录及其所有子目录中所有后缀名为js的文件
！js/app.js 除了js/app.js以外所有文件
*.+(js css)匹配项目根目录下，所有后缀名为js或css的文件
src方法的参数还可以是一个数组，用来指定多个成员
gulp.src(['js*.js','!js*.min.js'])
dest方法将管道的输出写入文件，同时将这些输出继续输出，所以可以依次调用多次dest方法，将输出写入多个目录。如果有目录不存在，将会被重建。
gulp.src('./client/templates/*.jade')
.pipe(jade())
.pipe(gulp.dest('./build/template'))
.pipe(minify())
.pipe(gulp.dest('./build/minified_templates'));
dest方法还可以接受第二个参数，表示配置对象
gulp.dest('build',{
cwd:'./app',
mode:'0644'
配置对象有两个字段。cwd字段指定写入路径的基准目录，默认是当前目录；mode字段指定写入文件的权限，默认是0777.
task方法用于定义具体的任务。它的第一个参数是任务名，第二个参数是任务函数。
gulp.task('greet',function(){
console.log('Hello world');
task方法还可以指定按顺序运行的一组任务
gulp.task('build',['css','js','imgs']);
指定任务build，它由css，js，imgs三个任务所组成。task方法会并发执行这三个任务。注意，每个任务都是异步调用，所以没有办法保证js任务的开始运行的时间。
如果希望各个任务严格按照次序运行，可以把掐一个任务写成后一个任务的依赖模块。
gulp.task('css',['greet'],function(){
css任务依赖greet任务，所以css一定会在greet运行完成后在运行。
task方法的回调函数，还可以接受一个函数作为参数，这对执行异步任务非常有用.
var exec=require('child_process').
gulp.task('jekyll',function(cb){
exec('jekyll build',function(err){
if(err) return cb(err);
如果一个任务的名字为default，就表明它是默认任务，在命令行直接输入gulp命令，就会运行该任务。
gulp.task('default',function(){
gulp.task('default',['styles','jshint','watch']);
执行的时候，直接使用gulp，就会运行styles，jshint，watch三个任务。
watch方法用于指定需要监视的文件。一旦这些文件发生变动，就运行指定任务。
gulp.task('watch',function(){
gulp.watch('templates/*.tmpl.html',['build']);
代码指定，一旦templates目录中的模板文件发生变化，就会运行build任务。
watch方法也可以用回调函数，代替指定的任务
gulp.watch('templates/*.tmpl.html',function(event){
console.log('Event type: '+event.type);
console.log('Event path: '+event.path);
另一种写法是watch方法所监控的文件发生变化时(修改、增加、删除文件)，就会触发change事件，可以对change事件指定回调函数
var watcher=gulp.watch('templates/*.tmpl.html',['build']);
watcher.on('change',function (event){
console.log('Event type: '+event.type);
console.log('Event path: '+event.path);
除了change事件，watch方法还可能触发以下事件
end 回调函数运行完毕时触发
error 发生错误时触发
ready 当开始监听文件时触发
nomatch 没有匹配的监听文件时触发
watcher对象还包含其他一些方法
watcher.end() 停止watcher对象，不会再调用任务或回调函数
watcher.files() 返回watcher对象监视的文件
watcher.add(glob)增加所要监视的文件，它还可以附件第二个参数，表示回调函数
watcher.remove(filepath) 从watcher对象中移走一个监听的文件
5.gulp-livereload模块
gulp-livereload模块用于自动刷新浏览器，反映出源码的最新变化。它除了模块以外，还需要在浏览器中安装插件，用于配合源码变化。
var gulp=require('gulp'),
less=require('gulp-less'),
livereload=require('gulp-livereload'),
watch=require('gulp-watch');
gulp.task('less',function(){
gulp.src('less/*.less')
.pipe(watch("less/*.less") )
.pipe(less())
.pipe(gulp.dest('css'))
.pipe(livereload());
代码用来监视less文件，一旦编译完成，就会自动刷新浏览器。
6 gulp-load-plugins模块
一般情况下，gulpfile.js中的模块需要一个个加载
var gulp=require('gulp'),
jshint=require('gulp-jshint'),
uglify=require('gulp-uglify'),
concat=require('gulp-concat');
gulp.task('js',function(){
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(uglify())
.pipe(concat('app.js'))
.pipe(gulp.dest('build'));
代码中除了gulp模块以外，还加载另外三个模块
这种加载的写法比较麻烦，使用gulp-load-plugins模块，可以加载package.json文件中所有的gulp模块。
var gulp=require('gulp'),
gulpLoadPlugins=require('gulp-load-plugins'),
plugins=gulpLoadPlugins();
gulp.task('js',function(){
return gulp.src('js/*.js')
.pipe(plugins.jshint())
.pipe(plugins.jshint.reporter('default'))
.pipe(plugins.uglify())
.pipe(plugins.concat('app.js'))
.pipe(gulp.dest('build'));
gulp前端自动化构建工具（二）：gulp插件/gulp模块介绍
最全的gulp插件，都在本人的gulp工具中所用，gulp模块的安装方法请点击模块的介绍链接，推荐使用淘宝镜像的npm进行...
gulp打包依赖的模块
var gulp =require('gulp');
var del=require('del');//在编译文件之前删除一些文件和文件夹
var header=require('gulp-heade...
简单使用gulp四个API和常用模块
gulp一共四个API，执行任务；找到文件的路径；输出文件路径；监听gulp.task
gulp.watch
No1 ：gulp.task()
nodejs-gulp 打包前端项目代码
之前做过一个项目，是一种无线设备，由于设备本身的内存容量比较小，为了节约内存使用，选择了gulp这种工具，可以将前端的代码进行打包发布，并能在项目中正常运行，较之之前的代码量有了量的突破，还是不错的。...
gulp-前端模块及依赖管理的新选择：Browserify
1. manually
以前，我新开一个网页项目，然后想到要用jQuery，我会打开浏览器，然后找到jQuery的官方网站，点击那个醒目的“Download jQuery”按钮，下载到.js...
gulp-load-plugins
使用gulp-load-plugins模块，可以加载package.json文件中所有的gulp模块，而不用一个一个地去加载。
在这之前，你肯定会注意到上面箭头所指的位置，那么你一定会看见，文章外面的大拇指图标，动动你的手指，就能点一下它，表示你很喜欢这篇文章。正题：什么是gulp:
Gulp 是基于nod...
转自:http://blog.csdn.net/franks_t_d/article/details/
上一篇介绍了本工具的功能、结构、命令，欢迎阅读。
介绍：http://www.gulpjs.com.cn/docs/getting-started/
作用：前端自动化构建工具，在国内经常使用的还有webpack和grunt。2、pa...
Grunt、Gulp区别
webpack、 requirejs区别
Webpack 是前端的打包工具类类似于 Grunt and Gulp.但是有区别，因为它是模块化构建机制，Webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript...
没有更多推荐了，Sea.js 手册与文档
seajs.use('./a');
seajs.use('./a', function(a) {
a.doSomething();
seajs.use(['./a', './b'], function(a, b) {
a.doSomething();
b.doSomething();
seajs.config({
'es5-safe': 'es5-safe/0.9.2/es5-safe',
'json': 'json/1.0.1/json',
'jquery': 'jquery/1.7.1/jquery'
preload: [
Function.prototype.bind ? '' : 'es5-safe',
this.JSON ? '' : 'json'
define(function(require, exports, module) {
// The module code goes here
define(function(require) {
var a = require('./a');
a.doSomething();
define(function(require, exports, module) {
// load one module
require.async('./b', function(b) {
b.doSomething();
// load multiple modules
require.async(['./c', './d'], function(c, d) {
// do something
define(function(require, exports) {
// snip...
exports.foo = 'bar';
exports.doSomething = function() {};
define(function(require, exports, module) {
// snip...
module.exports = {
name: 'a'，
doSomething: function() {};
sea.js最佳实践一基础框架搭建
（一下代码都是基于sea.js vesion 2.0）
index.html
没有更多推荐了，