用gulp 或 grunt 是怎么样的一个开发流程？ - CNode技术社区
积分: 2795
这家伙很懒，什么个性签名都没有留下。
就是gulp或者grunt是自动化的工具，然后驱动整个程序。
先建立一个空项目？
你得先有开发流程，然后grunt/gulp来帮你自动化
= require 'gulp'
= require 'gulp-clean'
= require 'gulp-cached'
= require 'gulp-coffee'
= require 'gulp-uglify'
= require 'gulp-connect'
sourcemaps
= require 'gulp-sourcemaps'
runSequence = require 'run-sequence'
: './dist'
: './src'
: './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']
我现在用的是gulp，开发流程大概是这样的。
有两个目录 dist 和 src，用到了coffee等。
在开发时编辑src下的文件，自动编译coffee，压缩等操作，同步会输出到dist目录，所以同时在调试的目录是dist。
发布的时候就发布dist里的文件。
不确定我这样的方法是不是正确的。
没什么正确不正确的，按这个流程开发能走通就没问题，然后开发时找到感觉麻烦的地方，持续优化就行了
貌似你们这个流程仅仅是为了处理一下coffee，我们是用connect-assets这个中间件，不需要预编译coffee
恩，个人项目，才刚开始接触gulp。
coffee的预编译主要是前端页面的需要，实际运行环境我是使用 pm2 来直接启动coffee的。
非常感谢！。
CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。
服务器赞助商为
，存储赞助商为
，由提供应用性能服务。
新手搭建 Node.js 服务器，推荐使用无需备案的yo 默认用gulp,如何使其使用grunt
现在用yo生成器生成webapp项目，默认是使用gulp的，而不是grunt，如何让他使用grunt?
写下你的评论...
写下你的评论...
写下你的评论...
Copyright (C)
All Rights Reserved | 京ICP备 号-2Grunt 是一个基于 task 的构建工具，依赖众多的插件进行配置组织，可以解决基本的前端自动化问题。FIS 是基于工具、开发框架、本地开发环境为一体的前端解决方案，不但拥有各类工具插件，同时还针对 PC、Mobile、I18n 等业务、场景总结了很多最佳实践。下面将对 FIS 与 Grunt 进行对比分析，让大家更好的了解 FIS。
自动化编译流程
FIS 可自动构建文件编译流程，减少手动操作
前端编译工具
FIS 拥有针对 JS、CSS、HTML、LESS、CoffeeScript、Smarty、前端模板等校验、合并、优化等工具，同时支持二次开发插件
前后端解耦
FIS 并不关心你使用的任何前后端框架以及语言，甚至可更好的独立开发前端项目
FIS 根据众多前端业务总结整理了适合各类场景的最佳实践方案，方面用户直接使用合理的前端方案
模块化支持
FIS 拥有 JS、CSS 以及模板级别的模块化方案
多平台多语言本地开发环境
FIS 可在多平台下支持 JAVA、NODEJS、PHP 的本地服务器，拥有数据模拟、URL 转发等功能，支持前端项目本地开发预览调试
FIS 可监听文件的变化直接进行文件编译、浏览器刷新，方面用户本地开发预览调试
FIS 可根据整站进行图片合并，减少繁重的手动成本
自定义规范
FIS 可根据不同的业务等制定开发及部署规范
静态资源管理
FIS 根据静态资源表对整站的静态资源进行管理加载
多平台支持
FIS 可在 win、Linux、mac 等系统下正常运行
自定义流程
FIS 根据前端开发的经验自定义一套合理的编译流程，无需用户再自定义
FIS 可根据配置编译发布至本地或任何其他机器，方便用户联调等
作者： - F.I.S最具价值web全栈课程
只做前端开发培训的好学校，专注于多方向全栈工程师培养。前端名师邵山欢亲自授课，课程涵盖HTML5、CSS3、Node.js、Angular、React诸多课程，免费视频广受学生好评。
跟牛人学前端
跟牛人学前端
妙味大前端自学宝典
妙味课堂2016年JavaScript课程大纲震撼升级、全栈来袭！
前端最新干货
前端最新干货
学前端，免费
爱创课堂由前百度工程师，《javaScript设计模式》张容铭老师创立，公司秉承纯干货，不忽悠的态度专注前端培训，让每个零基础的学员都能真正的从入门到精通。爱创课堂北京最具深度和口碑的JavaScript、HTML5培训，前端培训，专注于让学员获得快乐的学习体验并找到高薪工作的培训——数百名毕业学员高薪就职大型互联网公司.
CSS3参考手册
CSS3参考手册 - 最新最全的CSS参考手册，CSS3属性集合，CSS3 Properties, CSS3, CSS3手册, CSS3参考手册
您的位置： » 分类:
» 文章: 为什么我放弃 Gulp 和 Grunt 而使用 npm Scripts
您可能感兴趣的文章
近期最热文章
- 23,517 - 11,099 - 6,894 - 5,799 - 4,434 - 4,283
关注WEB前端开发公众号前端自动化：谈谈grunt和gulp的区别 - 博客频道 - CSDN.NET
成功道路并不拥挤，因为坚持的人不多
分类：nodejsweb前端js
自nodeJS登上前端舞台，自动化构建变得越来越流行。目前最流行的当属grunt和gulp,这两个光看名字挺像，功能也差不多，不过gulp能在grunt这位大哥如日中天的境况下开辟出自己的一片天地，有着她独到的优点。
易用 Gulp相比Grunt更简洁，而且遵循代码优于配置策略，维护Gulp更像是写代码。
高效 Gulp相比Grunt更有设计感，核心设计基于Unix流的概念，通过管道连接，不需要写中间文件。
Gulp的每个插件只完成一个功能，这也是Unix的设计原则之一，各个功能通过流进行整合并完成复杂的任务。例如：Grunt的imagemin插件不仅压缩图片，同时还包括缓存功能。他表示，在Gulp中，缓存是另一个插件，可以被别的插件使用，这样就促进了插件的可重用性。目前官方列出的有673个插件。
Gulp的核心API只有5个，掌握了5个API就学会了Gulp，之后便可以通过管道流组合自己想要的任务。
使用Grunt的I/O过程中会产生一些中间态的临时文件，一些任务生成临时文件，其它任务可能会基于临时文件再做处理并生成最终的构建后文件。而使用Gulp的优势就是利用流的方式进行文件的处理，通过管道将多个任务和操作连接起来，因此只有一次I/O的过程，流程更清晰，更纯粹。
代码优于配置 维护Gulp更像是写代码，而且Gulp遵循CommonJS规范，因此跟写Node程序没有差别。
一个简单的Gulpfile.js配置格式
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
gulp.task('lint', function() {
return gulp.src('src/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
gulp.task('minify', function(){
return gulp.src('src/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
gulp.task('watch', function() {
gulp.watch('src/*.js', ['lint', 'minify']);
gulp.task('default', ['lint', 'minify', 'watch']);
排名：第13007名
（81）（39）（26）（10）（5）（4）（18）（10）（1）（6）（3）（2）（8）（2）（6）（1）（1）