joywok-material-components/gulpfile.js

<h1 align="center"> Joywok Material Components </h1>

'use strict';
let gulp = require('gulp');//引入gulp
let del = require('del');//引入删除文件
let imagemin = require('gulp-imagemin');
let pngquant = require('imagemin-pngquant');
let htmlmin = require('gulp-htmlmin');
let $ = require('gulp-load-plugins')();
let less = require('gulp-less');
let babel=require('gulp-babel');
let concat = require('gulp-concat'); // 合并文件
let rename = require('gulp-rename'); // 重命名
let autoprefixer = require('gulp-autoprefixer');
const fs = require('fs');  
const iconfont = require('gulp-iconfont');
const consolidate = require('gulp-consolidate')
const through = require('through2');
const timestamp = Math.round(Date.now() / 1000);
const exec = require('child_process').execSync;
const spawn = require('child_process').spawn

function runCommand(cmd, args, options) {
  return new Promise((resolve, reject) => {
    const spwan = spawn(
      cmd,
      args,
      Object.assign(
        {
          cwd: process.cwd(),
          stdio: 'inherit',
          shell: true,
        },
        options
      )
    )
    spwan.on('exit', () => {
      resolve()
    })
  })
}

function mapGlyphs (glyph) {
  console.log(glyph,'asdasdasd');
  return { fileName: glyph.name, codePoint: glyph.unicode[0].charCodeAt(0).toString(16).toUpperCase(),color:glyph['color']}
}
gulp.task('svg',function(done){
  return gulp.src('components/**/icons/**')
    .pipe(through.obj(function(file,enc,cb){
      let name = file.relative.split('/')[0];
      let fontName = name
      gulp.src(`components/${name}/icons/*.svg`)
      .pipe(iconfont({
        fontName: fontName, 
        prependUnicode:false,
        formats:['svg', 'ttf', 'eot', 'woff', 'woff2'],
        normalize:true,
        fontHeight:1000,
        timestamp
      }))
      .on('glyphs', function(glyphs) {
        const options = {
          fontName:fontName,
          cssClass:fontName+'-icon',
          fontPath:'http://10.211.55.15/test/fontsize/'+fontName+'/',
          glyphs: glyphs.map(mapGlyphs)
        }
        gulp.src('template/_icons.css')
          .pipe(consolidate('lodash', options))
          .pipe(rename({ basename: 'icons' }))
          .pipe(gulp.dest(`components/${name}/style/`))
          .pipe(gulp.dest(`lib/${name}/style/`))
      })
    .pipe(gulp.dest(`components/${name}/font`))
    .pipe(gulp.dest(`lib/${name}/font`))
    .pipe(gulp.dest(`allfont/${name}/`));
    }))
})
gulp.task('copy',function(){
  return gulp.src('lib/**')
  .pipe(gulp.dest('../jw-appmaker/node_modules/joywok-material-components/lib/'));
})
gulp.task('publicLess', function () {
    gulp.src(['../../node_modules/antd/dist/antd.css','components/style/jw-components.css'])
        .pipe(concat('jw-components.css'))
        .pipe(gulp.dest('dist'));
});
gulp.task('js',()=>{
  return gulp.src('components/**/*.js')
    .pipe(babel())
    .pipe(gulp.dest("lib"))
    .pipe(gulp.dest('../jw-appmaker/node_modules/joywok-material-components/lib/'));
})
gulp.task('css', ()=>{
  // 编译css
  var sass = require('gulp-ruby-sass');
  return sass(['components/**/*.scss'],{
      style: 'expanded',
      precision: 10
      })
  .pipe(autoprefixer({
    browsers: ['last 2 versions','Android >= 4.0'],
    cascade: true,
    remove: true
  }))
  .on('error', console.error.bind(console))
  .pipe(gulp.dest('components/'))
  .pipe(gulp.dest('lib/'))
  .pipe(gulp.dest('../jw-appmaker/node_modules/joywok-material-components/lib/'));
});
// 压缩图片
gulp.task('img',()=>{
  return gulp.src('components/**/images/*')
    .pipe(imagemin({
      progressive: true,
      svgoPlugins: [{removeViewBox: false}],
      use: [pngquant()]
    }))
    .pipe(gulp.dest("lib"))
})
gulp.task('apidoc',function(){
  runCommand('apidoc -i components/ -o apidoc/',[],{
    cwd:process.cwd()+'/'
  })
  .then(function(resp){
  })
  .catch(function(error){
    console.log('error',error)
  })
})
gulp.task('default',["publicLess","css","js",'img','copy'],function(){
  gulp.watch(['components/**/*.scss'],["css"]);
  gulp.watch(['components/**/*.js'],["js",'apidoc']);
  gulp.watch(['components/**/icons/*.svg'],["svg",'copy']);
});