前端日常工作是什么？拿到PSD图，然后开切！首先我们建立一个app的文件夹，然后在app下，我们建立img文件夹，接下来是 css …… 项目终于搞定之后，我们要使用在线压缩工具把样式表进行合并压缩，把所有的大尺寸图片重新导入Ps，保存为 web 格式，然后调整质量 。。。。。。

你就没想过偷懒的办法么？你就是这么把时间耗在没有意义的简单机械的活儿中么？

或者，很多前端都已经开始使用Grunt这样的工具了，自动压缩、自动打包、文件合并、Less,Sass 编译、文件监控、本地文件服务器调试环境。不错，基于Grunt另外推出了非常多的 generate ，类似 angularJS , Ember , Backbone, webapp, bootstrap 等等等等，但是 Grunt 的学习曲线也是非常陡的。虽然能够通过一些通用脚手架来搭建前端工程作为基础架构。一旦需要修改配置，则是异常痛苦。

gulp 的功效和 Grunt 也是异曲同工、插件也是异常丰富。

通过 Grunt 与 gulp 的对比。我个人还是比较喜欢 gulp 的一些操作模式。不管是从词法、编程语义的理解程度来说。gulp 都是优于 Grunt 。官网的介绍谈到了文件流、以及处理速度。因为没有现成的案例，所以不能妄自评论。下面就浅谈一下两者之间的使用细节。

这里引用?http://markgoodyear.com/2014/01/getting-started-with-gulp/ 中的例子：

Grunt

sass: {
  dist: {
    options: {
      style: 'expanded'
    },
    files: {
      'dist/assets/css/main.css': 'src/styles/main.scss',
    }
  }
},

autoprefixer: {
  dist: {
    options: {
      browsers: [
        'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'
      ]
    },
    src: 'dist/assets/css/main.css',
    dest: 'dist/assets/css/main.css'
  }
},

grunt.registerTask('styles', ['sass', 'autoprefixer']);

Gulp

gulp.task('sass', function() {
  return gulp.src('src/styles/main.scss')
    .pipe(sass({ style: 'compressed' }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('dist/assets/css'))
});

不管从代码还是从阅读性上来说，Gulp 不是更加优越一些嘛？从代码的输入和输出，以及事件的操作顺序一幕了然，完全不用在复杂的GruntFile中间去找各种各样的变量表达式。妈妈再也不用担心我的学习！

那么我们来一个简单的Case吧。

首先确保你安装了NodeJS。

然后运行Continue reading