Gulp

来源：互联网发布：招淘宝客服是做什么的编辑：程序博客网时间：2024/06/18 10:08

案例1：

功能：browser-sync，监听sass，css，js，html文件

目录结构

//导入工具包 require('node_modules里对应模块')var gulp        = require('gulp');var browserSync = require('browser-sync').create();var sass        = require('gulp-sass');var reload      = browserSync.reload;//定义一个serve任务（自定义任务名称）gulp.task('serve', ['sass','jsWatch'], function() {  //定义任务（任务名称，依赖任务名称，回调函数）    browserSync.init({        server: "./"   //静态服务器    });    gulp.watch('js/*.js', ['jsWatch']);//监听js文件    gulp.watch("css/sass/*.scss", ['sass']);//监听scss文件    gulp.watch("*.html").on('change', reload);//监听html文件，change就reload重载});// scss编译后的css将注入到浏览器里实现更新gulp.task('sass', function() {    return gulp.src("css/sass/*.scss")//执行任务处理的文件路径        .pipe(sass.sync().on('error', sass.logError))//编译出错时命令行打印错误，但不跳出gulp        .pipe(gulp.dest("css/stylesheets"))//处理完成后文件生成路径        .pipe(reload({stream: true}));});gulp.task('jsWatch',function(){      gulp.src('js/*.js');      .pipe(browserSync.stream());})gulp.task('default', ['serve']);//定义默认任务（命令行输入gulp即可）

案例2：

待补充！！

其他：

1.browser-sync默认打开根目录的index.html，需要打开指定页面，在地址栏输入localhost:3000/other.html

2.

0 0