gulp一般使用

gulp的基本使用总结了一下几点：

1、gulp-ejs的使用 [ file include，html文件合并 ]：

let ejs = require("gulp-ejs");

gulp.task('fileinclude', function () {
  gulp.src('./!**.html') // gulp.src中存放要编译的文件
  .pipe(ejs({}, {ext: '.html'})) // 设置生成的文件后缀名为html
  .pipe(gulp.dest(changePath)); // gulp.dest中存放编译后的文件的存放地址

  gulp.src('./friends/!**.html')
  .pipe(ejs({}, {ext: '.html'}))
  .pipe(gulp.dest(changePath + 'friends/'));
});

2、gulp-sass 和 gulp-sourcemaps  的组合使用[编译css并迅速查看sass文件的地址]：

let sass = require("gulp-sass"); // compile scss
let sourcemaps = require("gulp-sourcemaps"); // sourcemaps plugin

gulp.task('scss', function () {
  gulp.src(['./dist/scss/**.scss'])
  .pipe(sourcemaps.init())
  .pipe(sass())
  .pipe(gulp.dest('./dist/css/'))
  .pipe(reload({stream: true}));
});

3、browser-sync的使用[使用静态服务器的代理]：

let browserSync = require("browser-sync").create(); // 获取 browser sync
let reload = browserSync.reload; // 浏览器重新加载

// 静态服务器
gulp.task('browser', function () {
  browserSync.init({
    server: changePath,
    port: 8000
  });
});

4、监听

gulp.task('watch', function () {
  gulp.watch(['./**.html', './dist/view/**/**.html'], ['html']);
  gulp.watch('./dist/css/**.css', ['css']);

  gulp.watch([changePath + '**.html', changePath + '**/**.html']).on('change', reload);
});

5、“文件搬运”

gulp.task('css', function () {
  gulp.src('./dist/css/**.css')
  .pipe(gulp.dest(changePath + 'vender/css/'));
});