Fis3構建工具css
Fis3的安裝node
npm install -g fis3git
查看fis3github
fis3 –vnpm
fi3構建工具新建文件夾瀏覽器
新建一個根目錄sass
進入根目錄輸入fis3 init指令初始化less
發佈以及監聽文件 編輯器
指令：fis3 release –w –d ./project(project本身建的文件)ide
建文件夾時，防止遞歸，加上配置文件
// FIS3 會讀取所有項目目錄下的資源，若是有些資源不想被構建，經過如下方式排除。
fis.set('project.ignore', [
'output/**',
'node_modules/**',
'.git/**',
'.svn/**',
'project/**' （project建的文件夾名）
]);
發佈
首先進入你建的文件夾，在輸入指令
browser-sync start –server –files 「*.*」
Fis3的配置文件
fis.match('*.{js,css}',{
useHash: true
});
fis.match('::p_w_picpath', {
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 會讀取所有項目目錄下的資源，若是有些資源不想被構建，經過如下方式排除。
fis.set('project.ignore',[
'output/**',
'node_modules/**',
'.git/**',
'.svn/**',
'project/**'
]);
// 對sass文件進行編譯
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/p_w_picpaths/$1$2'
})
fis.match('*.{png,jpg,gif}',{
packTo: './static/p_w_picpaths/$1$2'
})
//啓用插件 （絕對路徑轉化成相對路徑）
fis.hook('relative');
//讓全部文件，都使用相對路徑。
fis.match('**', {relative: true })
fis3開啓相對路徑
全局或本地安裝插件(絕對路徑轉化成相對路徑的插件)
npm install [-g] fis3-hook-relative
絕對路徑轉化成相對路徑的配置文件
fis.hook(‘relative’)
fis.match(‘**’,{relative:true})
postcss結合fis3使用
// fis3 的 postcss 插件中
fis中postcss的配置文件
fis.match('*.css', {
postprocessor: fis.plugin('postcss')
});
// 若是你的項目中有 scss
fis.match('*.scss', {
rExt: 'css',
parser: fis.plugin('node-sass', {
sourceMap: true
})
});
// 非下劃線開頭的才 autoprefixer
fis.match(/.*\/[a-zA-Z0-9]+\.scss$/,{
postprocessor: fis.plugin('postcss')
});
Postcss的插件
Autoprefixer 也僅僅是 PostCSS 其一個最出名的插件。插件 Autoprefixer 爲CSS補全瀏覽器前綴，這個插件是內置的，不須要咱們安裝。這個插件在sublime編輯器裏面也有。
sublime補全語法插件
sublime-autoprefixer-master
postcss還有一個px轉化成rem的插件，
postcss安裝px轉化成rem的插件（用fis3構建工具）
npm install fis3-postprocessor-px2rem
sublime編輯器裏有一個爲c***em-master的插件也有這個功能