利用fis3構建前端項目工程

FIS3是國內百度公司產出的一款前端工程構建工具，FIS3能夠解決前端工程中性能優化、資源加載（異步、同步、按需、預加載、依賴管理、合併、內嵌）、模塊化開發、自動化工具、開發規範、代碼部署等問題，首先來簡單的實現資源合併壓縮提升性能等問題。

安裝fix3

npm install -g fis3

建立項目目錄

cd 進入此目錄中初始化，執行

fis3 init

對須要的插件進行安裝 ，好比安裝scss編譯插件：

npm install -g --save-dev fis-parser-node-sass

注意：若是 fis-parser-node-sass 安裝失敗，請卸載nodejs，安裝低版本便可

 

讓 fis3 產出可以支持相對路徑。

npm install -g fis3-hook-relative

 

經常使用fis3插件 http://fis.baidu.com/fis3/docs/common-plugin.html

配置文件

打開fis-conf.js 作相應的配置

// 保持發佈使用相對路徑
fis.hook('relative');
fis.set('domain_test', '');
// 預發佈環境
fis.set('domain_pre', 'http://test.zuobaiquan.com');
// 線上環境
fis.set('domain_build', 'http://zuobaiquan.com');
// 定義版本號
fis.set('version', '1.0.0');

fis.set('project.files', [
    "tpl/**/*.html"
]);

fis.set('project.files', [
  '*.css',
  'js/**',
  'images/**',
  '*.html'
]);

fis.match("*", {
    relative: true
})

//添加時間戳，解決緩存。
.match('*.{js,css,png}', {
    useHash: true
})
.match('::package', {
  spriter: fis.plugin('csssprites', {
    htmlUseSprite: true,
    styleReg: /(<style(?:(?=\s)[\s\S]*?["'\s\w\/\-]>|>))([\s\S]*?)(<\/style\s*>|$)/ig,
    margin: 5
  })
})
.match('/css/*.scss', {
  rExt: '.css',
  parser: fis.plugin('node-sass', {
    // options...
  })
})
.match('css/*.{css,scss}', {
  preprocessor: fis.plugin('autoprefixer', {
    "browsers": ["Android >= 2.1", "iOS >= 4", "ie >= 8", "firefox >= 15"],
    "cascade": true
  })
})
.match('/css/*.{scss,css}', {
    useSprite: true,
    optimizer: fis.plugin('clean-css')
})
.match('/js/*.js', {
  parser: fis.plugin('babel-5.x'),
  // fis-optimizer-uglify-js 插件進行壓縮，已內置
  optimizer: fis.plugin('uglify-js')
})
.match('images/*.png', {
    optimizer: fis.plugin('png-compressor', {
        type: 'pngquant'
    })
})
.match('/css/(*.{png,gif})', {
  release: '/images/sprite/$1$2'
});

// fis.media('production').match('/js/*.js', {
//   parser: fis.plugin('jdists', {
//     remove: "debug"
//   })
// })

fis.media('test')
    .match("*", {
        domain: "${domain_test}",
    });

fis.media('pre')
    .match("*", {
      domain: "${domain_pre}",
    });

fis.media('build')
    .match('*', {
      domain: "${domain_build}"
    })

 若是打包build 不須要某些文件夾，可配置：

fis.match('/tpl/*', {
  // 設置 release 爲 false，再也不產出此文件
  release: false
})

 

開發階段命令： fis3 server stop && fis3 server clean && fis3 server start -p 4000 && fis3 release test --verbose -wLc
預發佈： fis3 release pre --verbose -cd ./pre
發佈階段：fis3 release build --verbose -cd ./dist

fis3 server stop //終止服務 
fis3 server clean //清除服務目錄下的文件 
fis3 server start -p 1111 //啓動服務，端口號是1111 （不加-p 1111的話默認端口號是8080） 
fis3 release test –verbose -wLc //調試模式 不會關閉cmd

 

項目目錄結構

建議安裝  fis-parser-babel-5.x 插件，這樣就支持 es六、es7 或者 jsx 編譯成 es5 啦，是否是很溜！

npm install -g --save-dev fis-parser-babel-5.x

fis-conf.js配置：

fis.match('*.js', {
  parser: fis.plugin('babel-5.x')
})

源碼地址：https://github.com/zuobaiquan/framework/tree/master/基於fis3前端工具構建的靜態頁面框架