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']);