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