generator-zl-fis3-less/app/templates/fis-conf.js

基于 Yeoman 的 FIS3 主题模板制作框架初始化脚手架

/**
 * Created by Dzl on 2017-1-17.
 * 基于 FIS3 的 less 开发环境
 * 应用于 主题模板库 的开发设计
 */


/************************* 环境变量 *****************************/
fis
    // 设置打包产出的路径
    .set('domain','/assets/design/')
    // 排除指定目录
    .set('project.ignore', [
        'node_modules/**',
        'output/**',
        //'dist/**',
        'dist-zip/**',
        'soft/**',
        'assets**',
        'bak/**',
        '.gitignore',
        '**/_*.scss',
        '**/_*.less',
        '.docs/**',
        '.dist/**',
        '.git/**',
        '.svn/**',
        'fis-conf.**',
        'package.json'
    ]);

// 如果是 prod 方式打包, 先在打包前先删除 ./dist 目录
if(fis.project.currentMedia() === 'prod'){
    if(fis.util.realpath('./dist')){
        console.log('dist path is exist! start del dist >>>');
        fis.util.del('./dist');
        console.log('dist is del ' + !fis.util.realpath('./dist'))
    }
}


// 启用相对路径插件
// https://github.com/fex-team/fis3-hook-relative
// cnpm i [--save-dev|-g] fis3-hook-relative
fis.hook('relative');
// 让所有 CSS 文件、html 中内嵌的 CSS 、以及 html 元素中使用的 style 中的样式，都使用相对路径。
fis
    .match('**.{less,css}', {
        relative: true
    })
    // 匹配命中的 html 文件中内嵌的 css 部分
    .match('**.html:css', {
        relative: true
    })
    // 匹配命中的 html 文件中的内联样式
    .match('**.html:inline-style', {
        relative: true
    });


/************************* 编译配置 *****************************/

// https://github.com/fouber/fis-parser-less-2.x
// https://github.com/less/less.js
// cnpm install (-g|--save-dev) fis-parser-less-2.x
// 要使用此插件,需要全局安装 less
// cnpm install -g less
fis.match('/page/web*/css/*.{less,css}', {
    relative: true,
    rExt: '.css', // from .less to .css
    parser: fis.plugin('less-2.x', {
        // fis-parser-less-2.x option
    }),
    release: '${domain}$0$1'
});

fis.match('/page/**', {
    release: '${domain}$0'
});

fis.match('/css/**.css', {
    release: '/assets/$0'
});
fis.match('/js/**', {
    release: '/assets/$0'
});


// #{specialPath}  正式发布时, 不再有 web1 这样的固定目录
// 需要使用 #{specialPath} 进行替换掉 *.html 中的 web1 名称
// 所有的 css 中的资源引用在打包时相对路径进行打包


// 生产环境打包
fis.media('prod')
    .match('page/web1/**',{
        deploy:[
            // https://github.com/fex-team/fis3-deploy-replace
            fis.plugin('replace',{
                from: /\/assets\/design\/page\/web1\//ig,
                to: function () {
                    return '/assets/design/page/#{specialPath}/';
                }
                // from: /\/page\/web1\//ig,
                // to: function () {
                //     return '/page/#{specialPath}/';
                // }
            })
            ,fis.plugin('local-deliver') // 发布到本地，由 -d 参数制定目录
        ]
    });

// 此处一定要注意, 不能使用 /page/web1/** , 如果使用则上一步 html 中的替换则无效了
// 必须针对已经打包成功后的 /dist 进行匹配
// 由于 fis3-deploy-replace 和 fis3-deploy-zl-zip 不能串联操作
// 只好做了两个打包环境
// 先由 prod 执行替换操作, 然后再由 prod-zip 来打包已经替换生成的 dist 目录下的文件
// 执行的命令: fis3 release prod -d ./dist && fis3 release prod-zip -d ./dist-zip
// 已经配置到 package.json 中 npm run prod-zip
fis.match('/dist/**', {
    isMod:false
});
fis.media('prod-zip')
    .match('/dist/assets/design/page/web1/**',{
        deploy: [
           // https://www.npmjs.com/package/fis3-deploy-zl-zip
            fis.plugin('zl-zip',{
                filename: 'web1.zip',
                startWithPath: '/dist/assets/design/page/web1/'
            }),
            fis.plugin('local-deliver')
        ]
    });