gulp 编译bootstrap sass文件和js文件

开始

因为laravel中有一个elixir很强大，但是不方便理解前端的工具细节，所以单独学习下相关工具。先从编译和安装bootstrap V4开始。

下文主要包含了对 bootstrap的scss和js的编译打包。

安装bootstrap源码

执行下面的命令，直接安装bootstrap v4的source包

npm install [email protected]

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