上节讲到gulp的安装,这篇说说gulp的一些模块使用。css
直接上gulpfile.js代码。html
使用每一个模块以前,须要使用npm install --save-dev gulp-xxxx安装模块
如下实现了监控改变编译
使用 browserSync + gulp 实现修改文件刷新浏览器
引入模块须要
browserSync官方文档 http://www.browsersync.cn/docs/gulp/
1 var gulp = require('gulp');//引入gulp自身 2 var uglify = require('gulp-uglify');//引入压缩组件 3 var concat = require('gulp-concat');//引入合并组件 4 var jshint = require('gulp-jshint');//引入检查组件 5 var sass = require('gulp-sass');//引入sass组件 6 var rename = require('gulp-rename');//引入重命名组件 9 var browserSync = require('browser-sync').create(); 10 var reload = browserSync.reload; 11 12 var paths = { 13 scripts:['js/index.js','js/main.js'] 14 };//定义要操做的文件路径 15 16 //检查脚本 17 gulp.task('lint', function() { 18 gulp.src('./js/*.js')//gulp模块的src方法,用于产生数据流。 19 .pipe(jshint()) 20 .pipe(jshint.reporter('default')); 21 console.log("lint"); 22 }); 23 24 //编译Sass 25 gulp.task('sass', function() { 26 gulp.src('./scss/*.scss') 27 .pipe(sass()) 28 .pipe(gulp.dest('./css'));// gulp模块的dest方法,能够用来传递文件,同时写入指定目录 29 console.log("sass"); 30 }); 31 32 // 合并,压缩js文件 33 gulp.task('scripts', function() { 34 gulp.src('./js/*.js') 35 .pipe(concat('all.js'))//合并输出到all.js 36 .pipe(gulp.dest('./dist'))//写入到指定目录 37 .pipe(rename('all.min.js'))//重命名为all.min.js 38 .pipe(uglify())//压缩js 39 .pipe(gulp.dest('./dist'))//输出到指定目录 40 .pipe(notify({ message: 'Scripts is OK' })); //提醒任务完成 41 console.log("scripts"); 42 }); 43 44 // 静态服务器 45 gulp.task('server',function() { 46 browserSync.init({ 47 server: { 48 baseDir: "./", 49 proxy: "localhost" 50 } 51 }); 52 }); 53 54 55 //默认会执行的任务 56 gulp.task('default', function() { 57 gulp.run('lint', 'sass', 'scripts','server'); 58 59 //watch方法监控资源变化 60 gulp.watch('./js/*.js',function () { 61 gulp.run('lint','sass','scripts'); 62 reload();//刷新页面 63 }); 64 gulp.watch('./scss/*.scss',function () { 65 gulp.run('sass'); 66 reload();//刷新页面 67 }); 68 gulp.watch("*.html").on('change', reload); 69 console.log("default"); 70 });