gulp+browsersync前端自動化構建和頁面自動同步

  學習gulp+browsersync進行前端自動化構建和測試，才發現對於前端開發人員是在太方便了，記錄下個人學習成果，本身動手搭建一個前端自動化構建框架。

介紹

gulp

  Gulp是一款基於node.js、流的前端自動化構建工具，能夠自動化的幫咱們完成前端開發中大量的重複工做，例如：預處理語言的編譯，html、css、js文件的壓縮混淆，圖片尺寸優化等。使得咱們能將工做的中心放在開發上，而不是這些重複繁瑣的工做。

browsersync

  BrowserSync是一款瀏覽器同步測試工具，讓瀏覽器實時響應html、js、css、sass、less等文件的更改，而不須要手動刷新頁面。而且它能夠同時在PC、平板、手機等設備下進項調試，只要手機平板連上pc的的wifi。使得前端開發測試便捷高效。

安裝

1. 因爲gulp是基於node.js的，因此安裝前應該安裝node.js以及它的npm包管理工具。
2. 利用npm安裝gulp模塊：全局安裝：npm install gulp -g
3. 安裝browsersync：npm install browsersync

自動化構建流程

1. 新建一個項目目錄
2. 在這個項目根目錄下輸入命令：npm init，建立項目的配置文件package.json
3. 添加gulp的項目依賴：npm install gulp --sava-dev，（ps：gulp首先得全局安裝）
4. 安裝browsersync：npm install browser-sync --save-dev
5. 在項目根目錄下建立：gulpfile.js文件
6. 在gulpfile.js中編寫項目須要自動化完成的任務。

7. gulp核心：gulpfile.js中完成的任務包括：

   • 1.LESS編譯 壓縮 合併
   • 2.JS合併 壓縮 混淆
   • 3.img複製
   • 4.html壓縮
8. 在命令窗口輸入：gulp serve

gulpfile.js的主要做用就是對開發時候的文件夾scr裏的文件進行處理（編譯、壓縮、混淆、合併等），將其輸出到生產時候的文件夾dist。開發與部署文件相分離。

var gulp = require('gulp');
var less = require('gulp-less');
var cssnano = require('gulp-cssnano');

// 1. LESS編譯 壓縮 --合併無必要，通常預處理CSS均可以導包
gulp.task('style', function() {
  gulp.src(['src/styles/*.less', '!src/styles/_*.less'])
//這裏第二個參數是排除_*.less（被其餘less文件導入的less文件）
    .pipe(less())//編譯成css文件
    .pipe(cssnano())//壓縮
    .pipe(gulp.dest('dist/styles'))
    .pipe(browserSync.reload({//通知瀏覽器從新加載
      stream: true
    }));
});

var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

// 2. JS合併 壓縮混淆
gulp.task('script', function() {
  gulp.src('src/scripts/*.js')
    .pipe(concat('all.js'))//合併爲all.js文件
    .pipe(uglify())//壓縮混淆
    .pipe(gulp.dest('dist/scripts'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

// 3. 圖片複製
gulp.task('image', function() {
  gulp.src('src/images/*.*')
    .pipe(gulp.dest('dist/images'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

var htmlmin = require('gulp-htmlmin');
// 4. HTML
gulp.task('html', function() {
  gulp.src('src/*.html')
    .pipe(htmlmin({
      collapseWhitespace: true,//空白縮進
      removeComments: true//刪除評論
    }))
    .pipe(gulp.dest('dist'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

var browserSync = require('browser-sync');
gulp.task('serve', function() {
  browserSync({
    server: {//開啓一個靜態文件服務器，默認：3000端口
      baseDir: ['dist']
    },
  }, function(err, bs) {
    console.log(bs.options.getIn(["urls", "local"]));
  });
  //監聽源文件的變化
  gulp.watch('src/styles/*.less',['style']);
  gulp.watch('src/scripts/*.js',['script']);
  gulp.watch('src/images/*.*',['image']);
  gulp.watch('src/*.html',['html']);
});

自動化構建項目框架--github地址

https://github.com/candyCCat/...