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/'));
});
上一篇:mysql优化 个人笔记(mysql安装 + profile + performance schema) 非礼勿扰 -m01


下一篇:struts2的java文件中不能直接弹出script对话框