gulp 編譯bootstrap sass文件和js文件

開始

由於laravel中有一個elixir很強大，可是不方便理解前端的工具細節，因此單獨學習下相關工具。先從編譯和安裝bootstrap V4開始。

下文主要包含了對 bootstrap的scss和js的編譯打包。

安裝bootstrap源碼

執行下面的命令，直接安裝bootstrap v4的source包

npm install bootstrap@4.0.0-alpha.5

安裝gulp plugins

npm install gulp-sass

npm install gulp-webpack

npm install gulp-babel 

npm install babel-preset-es2015

npm install path

目錄結構

創建新的scss文件

注意有些版本的bootstrap/scss目錄下全都是_xxx.scss文件，這樣sass是沒法進行編譯的（困擾了我很久）。咱們要新建一個bootstrap.scss文件，而且將內容修改成以下

import 'bootstrap';

可是v4中已經存在bootstrap.scss文件，而且import了全部的子文件，咱們就直接用就能夠了。

關於js

bootstrap中，dist目錄下已經生成了能夠直接使用，可是若是咱們要修改而後打包的話，就要用到源碼編譯。
以前沒有系統學過node，可是src目錄下的js須要進行編譯才能運行。就須要用到babel命令。
babel命令將每一個js文件進行編譯後，放到dist2文件夾中。而後咱們使用webpack命令進行模塊化打包。

代碼部分

var gulp = require('gulp');
var sass = require('gulp-sass');
var path = require('path');
var webpack = require('gulp-webpack');
var babel = require('gulp-babel');

// 設定路徑
var node_path = path.resolve(__dirname, './','node_modules');

// 創建任務
gulp.task('bootstrap',function() {
    // 生成scss
    gulp.src(node_path+'/bootstrap/scss/bootstrap.scss')
        .pipe(sass())
        .pipe(gulp.dest('public/css/'));
    // 將全部的src目錄下的js進行編譯，用babel，放到一個dist目錄下
    gulp.src(node_path+'/bootstrap/js/src/*.js')
        .pipe(babel({
            presets:['es2015']
        }))
        .pipe(gulp.dest(node_path+'/bootstrap/js/dist2'));
});
// 創建新的任務，依賴bootstrap任務
gulp.task('webpack',['bootstrap'],function() {
    // 將全部的dist2下的文件進行模塊化打包放到bootstrap.js文件
    gulp.src(node_path+'/bootstrap/js/dist2/*.js')
        .pipe(webpack({
            output:{
                filename:'bootstrap.js'
            }
        }))
        .pipe(gulp.dest('public/js/'));

});

gulp.task('default',['bootstrap','webpack']);