gulp自动化使用札记（2）合并压缩js ，scss编译，browserSync 修改文件刷新浏览器

上节讲到gulp的安装，这篇说说gulp的一些模块使用。

直接上gulpfile.js代码。

使用每一个模块以前，须要使用npm install --save-dev gulp-xxxx安装模块
如下实现了监控改变编译

使用 browserSync + gulp 实现修改文件刷新浏览器
引入模块须要

browserSync官方文档 http://www.browsersync.cn/docs/gulp/

　　安装borwsersync

    npm install -g browser-sync

    npm i browser-sync --save

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