【node】使用gulp来维护网站项目

基本参照此：http://www.gulpjs.com.cn/docs/getting-started/

1、电脑需要安装好nodejs，安装好的时候会自带npm

2、在命令行中执行命令安装gulp

npm install --save-dev gulp

3、安装sass进行scss文件的编译（请注意，需要先安装ruby）

npm install gulp-sass --save-dev

4、在网站根目录建立一个gulpfile.js文件，代码如下：

'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
  return gulp.src('./sass/*.scss')　　//对所有的事件，只编译来自当前目录下的sass目录下的所有scss文件
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./assets/css'));
});

gulp.task('sass:watch', function () {
  gulp.watch('./sass/*.scss', ['sass']); //当前目录下的sass目录下的所有scss文件的变更都会触发"['sass']"任务（task）
  gulp.watch('./sass/**/*.scss', ['sass']);//当前目录下的sass目录下的任何目录下的任何scss文件的改动都会触发“['sass']”任务（task）
});

如上可知，触发条件，与编译内容可以分别设置。

这样有什么好处呢？

比如./assets/bases/colors.scss定义了颜色变量

./assets/index.scss使用了前面定义的变量。这个时候，只要修改了colors.scss就会触发编译，并且编译出来的代码又不会有它自身。

所以这种布局，可以将需要编译的直接控制界面样式的scss文件，和为scss文件提供变量、常量的scss文件分离开来。所有的scss文件改动都会触发编译，但是只会编译./assets/index.scss，而不会将colors.scss中的内容完全编译成独立的colors.css文件。