随笔 - 44,  文章 - 0,  评论 - 4,  阅读 - 27732

原博主:幻天芒 原文地址:http://www.cnblogs.com/humin/p/4337442.html

gulp是什么?

http://gulpjs.com/ 相信你会明白的!

与著名的构建工具grunt相比,有什么优势呢?

  1. 易于使用,代码优于配置
  2. 高效,不会产生过多的中间文件,减少I/O压力
  3. 易于学习,API非常少,你能在很短的事件内学会gulp

那些常用的gulp插件

No.1、run-sequence

Linkshttps://www.npmjs.com/package/run-sequence

作用:让gulp任务,可以相互独立,解除任务间的依赖,增强task复用

推荐指数:★★★★★

No.2、browser-sync

Linkshttp://www.browsersync.io/

作用:静态文件服务器,同时也支持浏览器自动刷新

推荐指数:★★★★★

No.3、del

Links:https://www.npmjs.com/package/del

作用:删除文件/文件夹

推荐指数:★★★★★

No.4、gulp-coffee

Linkshttps://github.com/wearefractal/gulp-coffee

作用:编译coffee代码为Js代码,使用coffeescript必备

推荐指数:★★★★

No.5、coffee-script

Linkshttps://www.npmjs.com/package/coffee-script

作用:gulpfile默认采用js后缀,如果要使用gulpfile.coffee来编写,那么需要此模块

推荐指数:★★★

No.6、gulp-nodemon

Linkshttps://www.npmjs.com/package/gulp-nodemon

作用:自动启动/重启你的node程序,开发node服务端程序必备

推荐指数:★★★★★

No.7、yargs

Linkshttps://www.npmjs.com/package/yargs

作用:用于获取启动参数,针对不同参数,切换任务执行过程时需要

推荐指数:★★★

No.8、gulp-util

Linkshttps://www.npmjs.com/package/gulp-util

作用:gulp常用的工具库

推荐指数:★★★★★

No.9、gulp-uglify

Linkshttps://www.npmjs.com/package/gulp-uglify

作用:通过UglifyJS来压缩JS文件

推荐指数:★★★★

No.9、gulp-concat

Linkshttps://www.npmjs.com/package/gulp-concat

作用:合并JS

推荐指数:★★★★

No.10、gulp-sourcemaps

Linkshttps://www.npmjs.com/package/gulp-sourcemaps

作用:处理JS时,生成SourceMap

推荐指数:★★★★

No.11、gulp-less

Linkshttps://www.npmjs.com/package/gulp-less

作用:将less预处理为css

推荐指数:★★★★

No.12、gulp-sass

Linkshttps://www.npmjs.com/package/gulp-sass

作用:将sass预处理为css

推荐指数:★★★★

No.13、gulp-autoprefixer

Linkshttps://www.npmjs.com/package/gulp-autoprefixer

作用:使用Autoprefixer来补全浏览器兼容的css。

推荐指数:★★★★

No.14、gulp-minify-css

Linkshttps://www.npmjs.com/package/gulp-minify-css

作用:压缩css。

推荐指数:★★★★

No.15、connect-history-api-fallback

Linkshttps://www.npmjs.com/package/connect-history-api-fallback

作用:开发angular应用必须,用于支持HTML5 history API.

推荐指数:★★★

一般的gulpfile文件(采用coffee编写)

首先是,node应用程序:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
gulp = require('gulp')
runSequence = require('run-sequence')
 
coffee = require('gulp-coffee')
gutil = require('gulp-util')
del = require('del')
nodemon = require('gulp-nodemon')
argv = require('yargs').argv
rename = require('gulp-rename')
browserSync = require('browser-sync')
reload = browserSync.reload
 
# 处理参数
isDebug = not (argv.r || false)
 
# --入口任务-----------------------------------------------------------------
gulp.task('default', (callback)->
  runSequence(
    ['clean']
    ['coffee-server', 'copy-server', 'copy-client', 'coffee-client', 'copy-views']
    'serve'
    ['browserSync', 'watch']
    callback
  )
)
# --构建相关任务---------------------------------------
gulp.task('clean', (callback)->
  del(['./dist/'], callback)
)
 
gulp.task('coffee-server', ->
  gulp.src([
    './src/**/*.coffee'
    '!./src/public/**/*.coffee'
    '!./src/views/**'
  ])
  .pipe(coffee({bare: true}).on('error', gutil.log))
  .pipe(gulp.dest('./dist/'))
)
 
gulp.task('copy-server', ->
  gulp.src([
    './src/config*/*.json'
    './src/database*/*.*'
  ])
  .pipe(gulp.dest('./dist/'))
)
 
gulp.task('copy-client', ->
  gulp.src([
    './src/public*/**/*'
    '!./src/public*/**/*.coffee'
  ])
  .pipe(gulp.dest('./dist/'))
)
 
gulp.task('coffee-client', ->
  gulp.src([
    './src/public*/**/*.coffee'
  ])
  .pipe(coffee({bare: true}).on('error', gutil.log))
  .pipe(gulp.dest('./dist/'))
)
 
gulp.task('copy-views', ->
  gulp.src('./src/views/**/*.html')
  .pipe(rename({extname: '.vash'}))
  .pipe(gulp.dest('./dist/views'))
)
 
 
# --启动程序,打开浏览器任务----------------------------------------------------
nodemon_instance = undefined
gulp.task('serve', (callback)->
  called = false
  if not nodemon_instance
    nodemon_instance = nodemon({
      script: './dist/index.js'
      ext: 'none'
    })
    .on('restart', ->
      console.log('restart server......................')
    )
    .on('start', ->
      if not called
        called = true
        callback()
    )
  else
    nodemon_instance.emit("restart")
    callback()
  nodemon_instance
)
 
gulp.task('browserSync', ->
  browserSync({
    proxy: 'localhost:3000'
    port: 8888
  #files: ['./src/public/**/*']
    open: true
    notify: true
    reloadDelay: 500 # 延迟刷新
  })
)
 
 
 
# --监视任务------------------------------------------------
gulp.task('watch', ->
  gulp.watch([
    './src/**/*.*'
    '!./src/**/*.coffee'
  ], ['reload-client'])
  gulp.watch('./src/**/*.coffee', ['reload-server'])
)
 
gulp.task('reload-client', (callback) ->
  runSequence(
    ['copy-client', 'coffee-client', 'copy-views']
    'bs-reload'
    callback
  )
)
 
gulp.task('reload-server', (callback) ->
  runSequence(
    ['copy-server', 'coffee-server']
    'serve'
    'bs-reload'
    callback
  )
)
 
gulp.task('bs-reload', ->
  browserSync.reload()
)

  

接下来是前端网站:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
gulp = require('gulp')
gutil = require('gulp-util')
coffee = require('gulp-coffee')
del = require('del')
runSequence = require('run-sequence')
browserSync = require('browser-sync')
historyApiFallback = require('connect-history-api-fallback')
# 入口点
gulp.task('default', ->
  runSequence(
    ['clean']
    ['copy']
    ['serve']
  )
)
 
gulp.task('copy', ->
  gulp.src([
    './src/**/*.*'
    '!./src/**/*.coffee'
    '!./src/**/*.less'
  ])
  .pipe(gulp.dest('./dist'))
)
 
gulp.task('clean', (callback)->
  del(['./dist/'], callback)
)
 
gulp.task('serve', ->
  browserSync({
    server: {
      baseDir: "./dist"
      middleware: [historyApiFallback]
    }
    port: 2222
  })
)
 
gulp.task('watch', ->
  # do something...
)

由于connect-history-api-fallback这个包的用法改变,所以在browserSync中使用的时候,请使用middleware: [historyApiFallback()]

posted on   前端小透明  阅读(225)  评论(0编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· DeepSeek火爆全网,官网宕机?本地部署一个随便玩「LLM探索」
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 上周热点回顾(1.20-1.26)
· 【译】.NET 升级助手现在支持升级到集中式包管理

< 2025年1月 >
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示