gulp两种配置方式总结_gulp 两个版本怎么切换

n

n

e

c

t

.

s

e

r

v

e

r

(

r

o

o

t

:

[

a

p

p

.

d

e

v

P

a

t

h

]

,

l

i

v

e

r

e

l

o

a

d

:

t

r

u

e

,

/

/

自

动

加

载

p

o

r

t

:

1234

)

/

/

自

动

打

开

浏

览

器

o

p

e

n

(

′

h

t

t

p

:

/

/

l

o

c

a

l

h

o

s

t

:

123

4

′

)

/

/

实

现

自

动

编

译

；

我

们

希

望

的

是

，

每

更

改

一

段

代

码

，

它

自

动

编

译

，

并

自

动

刷

新

浏

览

器

来

查

看

g

u

l

p

.

w

a

t

c

h

(

a

p

p

.

s

r

c

P

a

t

h

′

s

c

r

i

p

t

/

∗

∗

/

∗

.

j

s

′

,

[

′

j

s

′

]

)

/

/

监

控

J

S

文

件

，

并

执

行

j

s

任

务

；

/

/

l

i

b

一

般

不

变

更

，

所

以

不

用

对

他

进

行

监

控

，

如

果

要

监

控

，

监

控

静

态

资

源

源

文

件

的

书

写

如

下

g

u

l

p

.

w

a

t

c

h

(

′

b

o

w

e

r

c

o

m

p

o

n

e

n

t

s

/

∗

∗

/

∗

′

,

[

′

l

i

b

′

]

)

g

u

l

p

.

w

a

t

c

h

(

a

p

p

.

s

r

c

P

a

t

h

′

∗

∗

/

∗

.

h

t

m

l

′

,

[

′

h

t

m

l

′

]

)

g

u

l

p

.

w

a

t

c

h

(

a

p

p

.

s

r

c

P

a

t

h

′

d

a

t

a

/

∗

∗

/

∗

.

j

s

o

n

′

,

[

′

j

s

o

n

′

]

)

g

u

l

p

.

w

a

t

c

h

(

a

p

p

.

s

r

c

P

a

t

h

′

s

t

y

l

e

s

/

∗

∗

/

∗

.

l

e

s

s

′

,

[

′

l

e

s

s

′

]

)

g

u

l

p

.

w

a

t

c

h

(

a

p

p

.

s

r

c

P

a

t

h

′

s

c

r

i

p

t

s

/

∗

∗

/

∗

.

j

s

′

,

[

′

j

s

′

]

)

g

u

l

p

.

w

a

t

c

h

(

a

p

p

.

s

r

c

P

a

t

h

′

i

m

a

g

e

/

∗

∗

/

∗

′

,

[

′

i

m

a

g

e

′

]

)

/

/

如

果

想

实

现

"

实

时

预

览

"

，

还

需

要

添

加

.connect.server({ root:[app.devPath], livereload:true,//自动加载 port:1234 }) //自动打开浏览器 open('http://localhost:1234') //实现自动编译；我们希望的是，每更改一段代码，它自动编译，并自动刷新浏览器来查看 gulp.watch(app.srcPath+'script/**/*.js',['js']) //监控JS文件，并执行js任务； //lib一般不变更，所以不用对他进行监控，如果要监控，监控静态资源源文件的书写如下 gulp.watch('bower_components/**/*',['lib']) gulp.watch(app.srcPath+'**/*.html',['html']) gulp.watch(app.srcPath+'data/**/*.json',['json']) gulp.watch(app.srcPath+'styles/**/*.less',['less']) gulp.watch(app.srcPath+'scripts/**/*.js',['js']) gulp.watch(app.srcPath+'image/**/*',['image']) //如果想实现"实时预览"，还需要添加

.connect.server(root:[app.devPath],livereload:true,//自动加载port:1234)//自动打开浏览器open(′http://localhost:1234′)//实现自动编译；我们希望的是，每更改一段代码，它自动编译，并自动刷新浏览器来查看gulp.watch(app.srcPath+′script/∗∗/∗.js′,[′js′])//监控JS文件，并执行js任务；//lib一般不变更，所以不用对他进行监控，如果要监控，监控静态资源源文件的书写如下gulp.watch(′bowerc​omponents/∗∗/∗′,[′lib′])gulp.watch(app.srcPath+′∗∗/∗.html′,[′html′])gulp.watch(app.srcPath+′data/∗∗/∗.json′,[′json′])gulp.watch(app.srcPath+′styles/∗∗/∗.less′,[′less′])gulp.watch(app.srcPath+′scripts/∗∗/∗.js′,[′js′])gulp.watch(app.srcPath+′image/∗∗/∗′,[′image′])//如果想实现"实时预览"，还需要添加.connect.reload()函数，在每个任务下面
})
//问题：每次都要手动执行任务，好麻烦，所以可以设置默认任务；以后直接调用gulp即可；
gulp.task(‘default’,[‘serve’])
也可以使用如下插件进行简单配置：
gulp-rev; //给每个文件添加版本号，根据文件的内容算出每个文件的哈希码
使用： .pipe(rev())
gulp-rev-replace //更新index中的文件引用（因为文件被添加了不同的hash）
gulp-useref //在html中通过注释的方法，写一些设置；用来合并JS和css的；
gulp-filter //他是一个过滤器，filter可以筛选出一些文件做一些处理；然后再放入,restore就是扔回去
var jsFilter=filter(’/.js’,{restore:true})
var cssFilter=filter(’**/.css’,{restore:true})
var indexHtmlFilter=filter([’/*’,’!/index.html’],{restore:true})
.pipe(jsFilter.restore)
.pipe(cssFilter.restore)
.pipe(indexHtmlFilter.restore)
gulp-uglify
gulp-csso
使用和配置如上插件
gulp.task(‘default’,function(){
var jsFilter=filter(’/*.js’,{restore:true})
var cssFilter=filter(’**/.css’,{restore:true})
var indexHtmlFilter=filter([’**/’,’!**/index.html’],{restore:true}) //注意：首页不加版本号；
return gulp.src(‘src/index.html’)
.pipe(useref()) //在html中通过注释的方法，写一些设置；用来合并JS和css的；
.pipe(jsFilter) //筛选出需要处理的JS文件
.pipe(uglify()) //把这些文件压缩处理
.pipe(jsFilter.restore) //把文件扔回去
.pipe(cssFilter)
.pipe(csso())
.pipe(cssFilter.restore)
.pipe(indexHtmlFilter)
.pipe(rev()) //排除首页后，对其他html文件加入hash;
.pipe(indexHtmlFilter.restore)
.pipe(revReplace()) //把index中的引用进行更新
.pipe(gulp.dest(‘dist’))//最后把文件流扔到最终目录；
})
注意：
1:／!xxx／(含*!)这类型的注释不会被压缩；
2:不去删除老的版本，担心用户正在观看还没更新，就无法访问了；
其他有用的插件
gulp-postcss给css加前缀
gulp-responsive 把大图生成一系列响应式图片

常用的JavaScript设计模式

• 单体模式

• 工厂模式

• 例模式

  

函数

• 函数的定义

• 局部变量和全局变量

• 返回值

• 匿名函数

• 自运行函数

• 闭包