gulp、webpack、grunt

gulp是基於流的代碼構建工具。
gulp的主要用於:
搭建web服務器
使用預處理器Sass，Less
壓縮優化資源，可以壓縮JS CSS Html 圖片
自動將更新變化的代碼實時顯示在瀏覽器【前端實時化】

使用前先要安裝gulp：
npm install gulp-cli -g：安裝 gulp 命令行工具
npm install gulp -g //全局安裝
npm install gulp –save-dev //本地安裝並加入package.json
檢查 gulp 版本：gulp --version

gulp的內置的方法說明：
gulp.src()：創建一個流，用於從文件系統讀取 Vinyl 對象。
gulp.dest()：創建一個用於將 Vinyl 對象寫入到文件系統的流。
栗子：

const { src, dest } = require('gulp');
	function copy() {
	  return src('input/*.js')
	    .pipe(dest('output/'));
	}
	exports.copy = copy;

gulp.task()：創建任務
gulp.watch():監視文件系統,文件改動時自動處理
gulp.pipe():管道
組合任務
Gulp 提供了兩個強大的組合方法： series() 和 parallel()，允許將多個獨立的任務組合爲一個更大的操作。這兩個方法都可以接受任意數目的任務（task）函數或已經組合的操作。series() 和 parallel() 可以互相嵌套至任意深度。

如果需要讓任務（task）按順序執行，請使用 series() 方法。
對於希望以最大併發來運行的任務（tasks），可以使用 parallel() 方法將它們組合起來。

gulp.task(str,option,fn)
  str爲任務名稱,唯一標識任務，option爲任務名數組，在此任務執行前先觸發的任務，fn爲回調函數。
特別注意option裏的任務
同步:

gulp.task('default', ['clean', 'less', 'images', 'js', 'watch']); 

異步：

gulp.task('default', ['clean'], function(){ 
     gulp.start('less', 'images', 'js', 'watch'); 
 });  

一般gulp會配置在一個gulpfiles.js的文件裏

var gulp = require('gulp'),
    browserSync = require('browser-sync').create(),
    uglify = require('gulp-uglify'), //壓縮js代碼
    minifycss = require('gulp-minify-css'), //壓縮css代碼
    rename = require('gulp-rename'), //重命名
    clen = require('gulp-clean'); //清理檔案


//靜態服務器
gulp.task('server', function() {
    browserSync.init({   //服務器配置
        server: {
            baseDir: "./"
        }
    });
    //監控文件變化,保存時自動刷新瀏覽器.
    gulp.watch("*.html").on('change', browserSync.reload);
    gulp.watch("dist/js/*.js", ['js-watch']);
    gulp.watch("dist/css/*.css", ['css']);
});

//處理css代碼的任務
gulp.task('css',['clean'],function(){
  return gulp.src('dist/css/*.css')
  .pipe(minifycss())
  .pipe(rename('index.min.css'))
  .pipe(gulp.dest('src/css'))
  .pipe(browserSync.stream()); //css代碼變化時刷新的寫法1
  //pipe(browserSync.reload({stream:true}))//寫法2
});

//js代碼的處理
gulp.task('js',['clean'],function(){
  return gulp.src('dist/js/*.js')
    .pipe(uglify()) 
    .pipe(rename('index.min.js'))
    .pipe(gulp.dest('src/js'));
});

//監視js代碼的變化
gulp.task('js-watch', ['js'], browserSync.reload);

//gulp clean:
gulp.task('clean',function(){
   return gulp.src(['src/js','src/css'],{read:false}).pipe(clean());
});


//配置默認的任務
gulp.task('default',['server'],function(done){
  done();
});

webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序需要的每個模塊，然後將所有這些模塊打包成一個或多個 bundle。

Grunt 自動化。對於需要反覆重複的任務，例如壓縮（minification）、編譯、單元測試、linting等，自動化工具可以減輕你的勞動，簡化你的工作。當你在 Gruntfile 文件正確配置好了任務，任務運行器就會自動幫你或你的小組完成大部分無聊的工作。

module.exports = function(grunt) {

  grunt.initConfig({
    jshint: {
      files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
      options: {
        globals: {
          jQuery: true
        }
      }
    },
    watch: {
      files: ['<%= jshint.files %>'],
      tasks: ['jshint']
    }
  });

  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', ['jshint']);

};