zoukankan      html  css  js  c++  java
  • 利用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)[sS]*?["'sw/-]>|>))([sS]*?)(</styles*>|$)/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 插件,这样就支持 es6、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前端工具构建的静态页面框架

  • 相关阅读:
    Selenium2学习(十)-- iframe定位
    Selenium2学习(九)-- 多窗口,句柄(handle)
    Selenium2学习(八)-- 操作元素(键盘和鼠标事件)
    Selenium2学习(七)-- 定位一组元素find_elements
    Selenium2学习(五)-- SeleniumBuilder辅助定位元素
    Selenium2学习(四)-- xpath定位
    Selenium2学习(三)-- 八种元素元素定位(Firebug和firepath)
    Selenium2学习(二)-- 操作浏览器基本方法
    提高mysql千万级大数据SQL查询优化30条经验(Mysql索引优化注意)
    poj 3468
  • 原文地址:https://www.cnblogs.com/zuobaiquan01/p/9266937.html
Copyright © 2011-2022 走看看