directory

  • FIS
    • FIS3 First taste — Publishing files
    • FIS compilation and compression
      • Sass file compilation
      • Js file compilation
      • File compression
    • debugging

I have used FIS, FIS2 and FIS3 in my previous work. Now I just put up my study notes, because I have a lot of things to practice, and I will sort out the next step later.

FIS

FIS is a construction system developed by Baidu’s front end team. There is basically no team maintenance for FIS now, but we still need to know about it. Compared to Grunt and GULP, the core feature of FIS is a high degree of integration.

It integrates the common development and build tasks of daily front-end development internally, so that developers can configure the work needed for our build process with a simple configuration file. We don’t need to define tasks in FIS like Grunt and Gulp, there are some built-in tasks in FIS, and the built-in tasks automatically complete the build tasks based on the development process. FIS also has a Web-server for debugging, which makes it easy to debug build results.

FIS3 First taste — Publishing files

  1. Download project Directoryfis-demo-temp, install dependenciesnpm install -g fis3
  2. usefis3 releaseYou can publish projects to a temporary directoryC:/Users/Administrator/AppData/Local/.fis3-tmp/www, this usesfis3 server openYou can open the default address of the service
  3. We can specify the directory publishing addressfis3 release -d output, published under the root directoryoutputFolder.

Resource location: The release release allows us to convert the relative path of a reference file into an absolute path to achieve resource location, which is a core feature in FIS.

Function: It allows us to completely separate the resource path from the deployment path. Front-end personnel do not need to care about the directory structure of deployment. We only need to use the relative path to reference resources during development.

  1. If you want to have a deployed configuration, create onefis-conf.jsfile
  2. We’re going to put the static resource file inassetsIn the directory, this configuration is required
// The fis match method matches the corresponding file, the first parameter is the matching rule, here is the interview folder under all js, SCSS, PNG files
// The second parameter is the corresponding configuration
fis.match('*.{js,scss,png}', {
  // release is the release directory
  // $0 refers to the original file directory structure
  release: '/assets/$0'
})
Copy the code
  1. runfis3 release -d outputYou can see that the directory structure has changed

The reference resources inside have also become absolute location

FIS compilation and compression

Sass file compilation

  1. Installing a plug-innpm i fis-parser-node-sass
  2. infis-conf.jsIn the writing
fis.match('*.{js,scss,png}', {
  release: '/assets/$0'
})

fis.match('**/*.scss', {
  // Change the SCSS extension CSS
  rExt: '.css'.// Use the fIS-parser-node-sass plugin
  parser: fis.plugin('node-sass')})Copy the code
  1. Execute on the command linefis3 release -d outputAs you can see, the Sass files have been converted to CSS files, and the references in index.html have been converted to CSS

Js file compilation

  1. Installing a plug-innpm i fis-parser-babel-6.x
  2. infis-conf.jsIn the writing
fis.match('*.{js,scss,png}', {
  release: '/assets/$0'
})

fis.match('**/*.js', {
  // Only 6.x is available, but Babel has been updated to 7.x
  parser: fis.plugin('babel-6.x')})Copy the code
  1. Execute on the command linefis3 release -d outputAs you can see, the JS file has been compiled

File compression

  1. becausecssandjsCompression isfisBuilt-in plug-ins, so directly infis-conf.jsIn the writing
fis.match('*.{js,scss,png}', {
  release: '/assets/$0'
})

fis.match('**/*.scss', {
  rExt: '.css'.parser: fis.plugin('node-sass'),
  // Fis built-in CSS compression plug-in
  optimizer: fis.plugin('clean-css')
})

fis.match('**/*.js', {
  parser: fis.plugin('babel-6.x'),
  // Fis built-in JS compression plug-in
  optimizer: fis.plugin('uglify-js')})Copy the code

debugging

Use the fis3 inspect command to see which files are being acted on

fis3 inspect

# [INFO] Currently running fis3 (C:\Users\huqi\AppData\Roaming\npm\node_modules\fis3\)

# ~ /css/style.scss
# -- release /assets/css/style.css `*.{js,scss,png}` (0th)
# -- rExt .css `**/*.scss` (1th)
# -- parser [plugin `node-sass`] `**/*.scss` (1th)
# -- optimizer [plugin `clean-css`] `**/*.scss` (1th)


# ~ /dist/fis-conf.dev.js
# -- release /assets/dist/fis-conf.dev.js `*.{js,scss,png}` (0th)
# -- parser [plugin `babel-6.x`] `**/*.js` (2th)
# -- optimizer [plugin `uglify-js`] `**/*.js` (2th)


# ~ /img/icon.png
# -- release /assets/img/icon.png `*.{js,scss,png}` (0th)


# ~ /index.html
# -- empty

# ~ /js/app.js
# -- release /assets/js/app.js `*.{js,scss,png}` (0th)
# -- parser [plugin `babel-6.x`] `**/*.js` (2th)
# -- optimizer [plugin `uglify-js`] `**/*.js` (2th)


# ~ /package-lock.json
# -- empty

# ~ ::package
# -- empty

# ~ plugin check
# installed plugins:
# fis-parser-node-sass
# fis-parser-babel-6.x
# fis-optimizer-clean-css
# fis-optimizer-uglify-js

# no more plugin are needed
Copy the code