前端构建之gulp与常用插件

gulp是什么?

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

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

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

Links: https://www.npmjs.com/package/run-sequence

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

推荐指数:★★★★★

No.2、browser-sync

Links: http://www.browsersync.io/

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

推荐指数:★★★★★

No.3、del

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

作用:删除文件/文件夹

推荐指数:★★★★★

No.4、gulp-coffee

Links: https://github.com/wearefractal/gulp-coffee

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

推荐指数:★★★★

No.5、coffee-script

Links: https://www.npmjs.com/package/coffee-script

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

推荐指数:★★★

No.6、gulp-nodemon

Links: https://www.npmjs.com/package/gulp-nodemon

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

推荐指数:★★★★★

No.7、yargs

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

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

推荐指数:★★★

No.8、gulp-util

Links: https://www.npmjs.com/package/gulp-util

作用:gulp常用的工具库

推荐指数:★★★★★

No.9、gulp-uglify

Links: https://www.npmjs.com/package/gulp-uglify

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

推荐指数:★★★★

No.9、gulp-concat

Links: https://www.npmjs.com/package/gulp-concat

作用:合并JS

推荐指数:★★★★

No.10、gulp-sourcemaps

Links: https://www.npmjs.com/package/gulp-sourcemaps

作用:处理JS时,生成SourceMap

推荐指数:★★★★

No.11、gulp-less

Links:https://www.npmjs.com/package/gulp-less

作用:将less预处理为css

推荐指数:★★★★

No.12、gulp-sass

Links:https://www.npmjs.com/package/gulp-sass

作用:将sass预处理为css

推荐指数:★★★★

No.13、gulp-autoprefixer

Links:https://www.npmjs.com/package/gulp-autoprefixer

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

推荐指数:★★★★

No.14、gulp-minify-css

Links:https://www.npmjs.com/package/gulp-minify-css

作用:压缩css。

推荐指数:★★★★

No.15、connect-history-api-fallback

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

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

推荐指数:★★★

一般的gulpfile文件(采用coffee编写)
首先是,node应用程序:

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()
)

接下来是前端网站:

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()]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值