用gulp 或 grunt 是怎么样的一个开发流程?
发布于 10 年前 作者 think2011 4772 次浏览 最后一次编辑是 8 年前
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的。

非常感谢!。

回到顶部