您好,登錄后才能下訂單哦!
Fis3構(gòu)建工具
Fis3的安裝
npm install -g fis3
查看fis3
fis3 –v
fi3構(gòu)建工具新建文件夾
新建一個根目錄
進入根目錄輸入fis3 init指令初始化
發(fā)布以及監(jiān)聽文件
指令:fis3 release –w –d ./project(project自己建的文件)
建文件夾時,防止遞歸,加上配置文件
// FIS3 會讀取全部項目目錄下的資源,如果有些資源不想被構(gòu)建,通過以下方式排除。
fis.set('project.ignore', [
'output/**',
'node_modules/**',
'.git/**',
'.svn/**',
'project/**' (project建的文件夾名)
]);
發(fā)布
首先進入你建的文件夾,在輸入指令
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 會讀取全部項目目錄下的資源,如果有些資源不想被構(gòu)建,通過以下方式排除。
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'
})
//啟用插件 (絕對路徑轉(zhuǎn)化成相對路徑)
fis.hook('relative');
//讓所有文件,都使用相對路徑。
fis.match('**', {relative: true })
fis3開啟相對路徑
全局或本地安裝插件(絕對路徑轉(zhuǎn)化成相對路徑的插件)
npm install [-g] fis3-hook-relative
絕對路徑轉(zhuǎn)化成相對路徑的配置文件
fis.hook(‘relative’)
fis.match(‘**’,{relative:true})
postcss結(jié)合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補全瀏覽器前綴,這個插件是內(nèi)置的,不需要我們安裝。這個插件在sublime編輯器里面也有。
sublime補全語法插件
sublime-autoprefixer-master
postcss還有一個px轉(zhuǎn)化成rem的插件,
postcss安裝px轉(zhuǎn)化成rem的插件(用fis3構(gòu)建工具)
npm install fis3-postprocessor-px2rem
sublime編輯器里有一個為c***em-master的插件也有這個功能
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。