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/'));
});