//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'); //本地安装gulp所用到的地方
var sass = require('gulp-sass');
// 定义一个sass的任务
gulp.task('sass', function () {
return gulp.src('dist/css/*.scss') //该任务针对的文件
.pipe(sass.sync().on('error', sass.logError))
.pipe(gulp.dest('dist/css')); //将会在dist/css下生成*.css
});
// 监听sass编译 自动执行sass任务,编译监听sass并生成css文件
gulp.task('sass:watch', function () {
gulp.watch('dist/css/*.scss', ['sass']);
});
//引入gulp插件browser-sync
var browserSync = require('browser-sync').create();
// 静态服务器 + 监听 scss/html/js 文件
gulp.task('browser-sync', function() {
browserSync.init({ //初始化项目跟目录为'./'
server: {
baseDir: "./"
}
});
gulp.watch('*.html').on('change', browserSync.reload); //监听html文件的变化,自动重新载入
gulp.watch('dist/css/*.css').on('change', browserSync.reload); //监听css文件的变化,自动重新载入
gulp.watch('dist/js/*.js').on('change', browserSync.reload); //监听js文件的变化,自动重新载入
});
//默认启动的gulp任务数组['browser-sync', 'sass:watch']
gulp.task('default', ['browser-sync', 'sass:watch']);输入代码
打开App,阅读手记