de-bootstrap/Gulpfile.js

The custom version of bootstrap.

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var concat = require('gulp-concat');
var minifyCss = require('gulp-minify-css');
var iconfont = require('gulp-iconfont');
var consolidate = require('gulp-consolidate');
var watch = require('gulp-watch');
var tap = require('gulp-tap');
var DOMParser = require('xmldom').DOMParser;
var XMLSerializer = require('xmldom').XMLSerializer;
var _ = require('underscore');
var svgmin = require('gulp-svgmin');

var config = {
    serverPort: 3002,
    baseUrl: __dirname,
    styleName: 'index.css',
};

var iconConf = {
    paths: ['./img/_icons/**/*.svg'],
    fontPath: './fonts/', //生成字体文件目录
    fontName: 'dataease', //生成字体文件名称
    cssTmpl: './fonts/fonts.css', //css模版文件位置
    htmlTmpl: './fonts/index.html',
    cssPrefix: 'icn', //生成css 的class 前缀
    cssPath: './sass/plugins',
    htmlPath: './demo/fonts', //生成./demo/fonts/index.html
};

config.icons = iconConf;

gulp.task('sass', function() {
    console.log('Compile scss files start...');
    gulp.src(['./sass/bootstrap/bootstrap.scss', './sass/plugins/**/*', './sass/components/**/*.scss'])
        .pipe(sass().on('error', sass.logError))
        .pipe(concat(config.styleName))
        .pipe(gulp.dest('./'));
});

gulp.task('sass:plugin', function() {
    console.log('Compile scss files start...');
    gulp.src(['./js/*/*.scss'])
        .pipe(sass().on('error', sass.logError))
        .pipe(concat('plugin.css'))
        .pipe(gulp.dest('./'));
});

gulp.task('watch-sass:plugin', function() {
    watch('./js/*/*.scss', function() {
        return gulp.start(['sass:plugin']);
    });
});

gulp.task('watch-sass', function() {
    watch('./sass/**/*', function() {
        return gulp.start(['sass']);
    });
});

gulp.task('watch-icons', function() {
    return watch('./img/_icons/**/*.svg', function() {
        return gulp.start(['gen-icons']);
    });
});

//把img/_icons 目录下的svg 生成为font 文件以及 html css文件
gulp.task('gen-icons', function() {
    return;
    var runTimestamp = Math.round(Date.now() / 1000);

    return gulp.src(config.icons.paths)
        .pipe(iconfont({
            fontName: config.icons.fontName,
            prependUnicode: true,
            timestamp: runTimestamp,
            normalize: true,
            fontHeight: 1001,
            descent: -36
        }))
        .on('glyphs', function(glyphs, options) {
            if (glyphs.color == undefined) {
                glyphs.color = 'initial'; //set default color;
            }

            //纯数字的svg 前缀中添加menu
            _.each(glyphs, function(glyph) {
                if (/^\d+$/.test(glyph.name)) {
                    glyph.name = 'menu-' + glyph.name;
                }
                glyph.name = glyph.name.replace(/_/g, '-');
            });
            //css 文件的生成
            generateCssAssets(glyphs);
            generateDemoHtmlAssets(glyphs);
        }).pipe(gulp.dest(config.icons.fontPath));

});

//remove the last non-white path position and append to the parent node
function preprocessSvgIcons(file, t) {
    var svgStr = file.contents.toString('utf8');
    var doc = new DOMParser().parseFromString(svgStr);
    var allElements = doc.getElementsByTagName('*');

    for (var i = allElements.length - 1; i >= 0; i--) {
        var ele = allElements[i];
        if (ele.getAttribute('fill') !== null) {
            if (isNotWhiteValue(ele.getAttribute('fill'))) {
                ele.parentNode.removeChild(ele);
                ele.parentNode.appendChild(ele);
                break;
            }
        }
    }

    var s = new XMLSerializer();
    var str = s.serializeToString(doc);
    file._contents = new Buffer(str);
    file.contents = file._contents;
}

function isNotWhiteValue(val) {
    var value = val.toUpperCase();
    return value != '#FFFFFF' && value != 'WHITE' && value != '#FFF';
}

//icon font demo css 文件的生成
function generateCssAssets(glyphs) {
    gulp.src(config.icons.cssTmpl)
        .pipe(consolidate('lodash', {
            glyphs: glyphs,
            fontName: config.icons.fontName,
            fontPath: config.icons.fontPath,
            prefixName: config.icons.cssPrefix
        }))
        .pipe(gulp.dest(config.icons.cssPath));
}

//icon font demo html 文件的生成
function generateDemoHtmlAssets(glyphs) {
    gulp.src(config.icons.htmlTmpl)
        .pipe(consolidate('lodash', {
            glyphs: glyphs,
            fontName: config.icons.fontName,
            fontPath: config.icons.fontPath,
            prefixName: config.icons.cssPrefix
        }))
        .pipe(gulp.dest(config.icons.htmlPath));
}

gulp.task('live-reload', function() {
    browserSync.init({
        server: {
            proxy: "localhost:" + config.serverPort,
            baseDir: './'
        }
    });
    gulp.watch('./sass/**/*.scss', ['sass']);
    gulp.watch('app/**/*').on('change', browserSync.reload);
});

//Watch sass files and compile in real time
gulp.task('build', ['gen-icons', 'sass', 'sass:plugin', 'watch-sass', 'watch-sass:plugin', 'watch-icons']);

gulp.task('default', ['gen-icons', 'sass']);

gulp.task('serve', ['sass', 'live-reload']);