在Mac OS上安装使用Node.js的项目自动化构建工具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']); 

Grunt需要各别配置外挂，指定其来源与目的路径。例如，我们将一个档案作为外挂Sass的输入，并储存输出结果。在设置Autoprefixer时，需要将Sass的输出结果作为输入，产生出一个新档案。来看看在Gulp中同样的配置：

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中我们只需要输入一个档案即可。经过外挂Sass处理，再传到外挂Autoprefixer，最终取得一个档案。这样的流程加快建构过程，省去读取及写出不必要的档案，只需要最终的一个档案。