Talking about Fis3 and postcss

Fis3 Build Tools

Fis3 the installation

NPM Install - g Fis3

View Fis3

Fis3–v

Fi3 Build Tool New Folder

Create a new root directory

Enter the root directory FIS3 Init Initialization of Instructions

650) this.width=650; "src=" https://s3.51cto.com/wyfs02/M02/96/00/wKiom1kb7cmgE6DxAACF0QigV6g922.jpg "title=" 1.jpg "alt=" Wkiom1kb7cmge6dxaacf0qigv6g922.jpg "/>

Publish and listen files

directive: fis3 release–w–d./project (Project -built files )

Prevent recursion when building folders, plus configuration files

//FIS3 the resources under all project directories are read, and if some resources do not want to be constructed, they are excluded by the following methods.

Fis.set (' Project.ignore ', [

' output/** ',

' node_modules/** ',

'. git/** ',

'. svn/** ',

' project/** ' ( Project name of the folder to be built)

]);

650) this.width=650; "src=" https://s4.51cto.com/wyfs02/M02/96/00/wKiom1kb7bLR44z4AAB2rIIm6oc463.jpg "title=" 2.jpg "alt=" Wkiom1kb7blr44z4aab2riim6oc463.jpg "/>

Release

First enter the folder you built, in the input command

Browser-syncstart–server–files "* *"

650) this.width=650; "src=" https://s4.51cto.com/wyfs02/M02/96/00/wKioL1kb7faz72sAAACSBxxkJUs057.jpg "title=" 3.jpg "alt=" Wkiol1kb7faz72saaacsbxxkjus057.jpg "/>

Fis3 the configuration file

Fis.match (' *.{ JS,CSS} ', {

Usehash:true

});

Fis.match (':: Image ', {

Usehash:true

});

Fis.match (' *.js ', {

Optimizer:fis.plugin (' Uglify-js ')

});

Fis.match (' *.css ', {

Optimizer:fis.plugin (' Clean-css ')

});

Fis.match (' *.png ', {

Optimizer:fis.plugin (' Png-compressor ')

});

Fis.media (' Dev ')

. Match (' * ', {

Usehash:false,

Optimizer:null

});

Extends GLOBAL config

Fis.media (' production ');

FIS3 reads the resources under all project directories, and if some of the resources do not want to be built, they are excluded by the following methods.

Fis.set (' Project.ignore ', [

' output/** ',

' node_modules/** ',

'. git/** ',

'. svn/** ',

' project/** '

]);

Compiling the Sass file

Fis.match (' **.{ Scss,sass} ', {

Parser:fis.plugin (' Node-sass ', {

}),

REXT: '. css '

})

Fis.match ('./static/lib/**/**.min.js ', {

Release:false

})

Fis.match (' *.{ LESS,CSS,SCSS} ', {

PackTo: './static/css/aio.css '

});

Fis.match (' *.js ', {

PackTo: './static/js/aio.js '

});

Fis.match (' *.{ Png,jpg,gif} ', {

Release: './static/images/$1$2 '

})

Fis.match (' *.{ Png,jpg,gif} ', {

PackTo: './static/images/$1$2 '

})

//Enable plugins (absolute path converted to relative path)

Fis.hook (' relative ');

Make all files use relative paths.

Fis.match (' * * ', {relative:true})

FIS3 Open Relative path

Global or locally installed plug-ins (plug-ins that convert absolute paths to relative paths)

NPM install [-g] fis3-hook-relative

A configuration file that transforms an absolute path into a relative path

Fis.hook (' relative ')

Fis.match (' * * ', {relative:true})

Postcss combined with FIS3

Fis3 in the Postcss plugin

Configuration file for Postcss in FIS

Fis.match (' *.css ', {

Postprocessor:fis.plugin (' Postcss ')

});

If you have scss in your project

Fis.match (' *.scss ', {

REXT: ' CSS ',

Parser:fis.plugin (' Node-sass ', {

Sourcemap:true

})

});

A non-underlined beginning Autoprefixer

Fis.match (/.*\/[a-za-z0-9]+\.scss$/,{

Postprocessor:fis.plugin (' Postcss ')

});

Postcss the plugin

Autoprefixer It's just Postcss one of its most famous plugins. Plugins Autoprefixer to beCSSFull Browser prefix, this plugin is built-in and does not require us to install. This plugin isSublimeThere are also inside the editor.

650) this.width=650; "src=" https://s3.51cto.com/wyfs02/M00/96/00/wKioL1kb7jyxsD_vAACUFRtqY8Y667.jpg "title=" 4.jpg "alt=" Wkiol1kb7jyxsd_vaacufrtqy8y667.jpg "/>

Sublime Complement Syntax plugin

Sublime-autoprefixer-master

POSTCSS also has a plug-in that converts PX into REM,

Postcss installing PX into REM plug-in (with FIS3 build tool)

NPM Install Fis3-postprocessor-px2rem

There is a plugin for cssrem-master in the sublime editor which also has this function

Talking about Fis3 and postcss