用gulp 或 grunt 是怎么样的一个开发流程?
发布于 7个月前 作者 think2011 589 次浏览
7 回复

就是gulp或者grunt是自动化的工具,然后驱动整个程序。

先建立一个空项目?

你得先有开发流程,然后grunt/gulp来帮你自动化

gulp        = require 'gulp'
clean       = require 'gulp-clean'
cached      = require 'gulp-cached'
coffee      = require 'gulp-coffee'
uglify      = require 'gulp-uglify'
connect     = require 'gulp-connect'
sourcemaps  = require 'gulp-sourcemaps'
runSequence = require 'run-sequence'


paths = 
    dist  : './dist'
    src   : './src'
    html  : './src/**/*.html'
    coffee: './src/**/*.coffee'


gulp.task 'default', ->
    runSequence 'clean', 'watch', 'html', 'coffee', 'connect'

gulp.task 'build', ->
    runSequence 'clean', 'html', 'build-coffee'


handleError = (err) ->
  console.log err
  @emit 'end'


gulp.task 'clean', ->
    gulp.src paths.dist, {read: false}
    .pipe clean {force: true}


gulp.task 'connect', ->
    connect.server
      root: paths.dist
      livereload: true


gulp.task 'html', ->
    gulp.src paths.html
    .pipe gulp.dest paths.dist
    .pipe connect.reload()


gulp.task 'coffee', ->
    gulp.src paths.coffee
    .pipe cached 'coffee'
    .pipe sourcemaps.init() 
    .pipe coffee(bare: true).on('error', handleError)
    .pipe uglify(mangle: false) # 不混淆参数
    .pipe sourcemaps.write('./')
    .pipe gulp.dest paths.dist
    .pipe connect.reload()


gulp.task 'build-coffee', ->
    gulp.src paths.coffee
    .pipe cached 'coffee'
    .pipe coffee(bare: true).on('error', handleError)
    .pipe uglify(mangle: false) # 不混淆参数
    .pipe gulp.dest paths.dist


gulp.task 'watch', ->
    gulp.watch paths.coffee, ['coffee']

    gulp.watch paths.html, ['html']

@ravenwang 我现在用的是gulp,开发流程大概是这样的。 有两个目录 dist 和 src,用到了coffee等。 在开发时编辑src下的文件,自动编译coffee,压缩等操作,同步会输出到dist目录,所以同时在调试的目录是dist。 发布的时候就发布dist里的文件。

不确定我这样的方法是不是正确的。

@think2011 没什么正确不正确的,按这个流程开发能走通就没问题,然后开发时找到感觉麻烦的地方,持续优化就行了 貌似你们这个流程仅仅是为了处理一下coffee,我们是用connect-assets这个中间件,不需要预编译coffee

@ravenwang 恩,个人项目,才刚开始接触gulp。 coffee的预编译主要是前端页面的需要,实际运行环境我是使用 pm2 来直接启动coffee的。

非常感谢!。

回到顶部