淺談fis3與postcss

標籤：fis3 postcss

Fis3構建工具

Fis3的安裝

npm install -g fis3

查看fis3

fis3 –v

fi3構建工具建立檔案夾

建立一個根目錄

進入根目錄輸入fis3 init指令初始化

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

發布以及監聽檔案

指令：fis3 release –w –d ./project(project自己建的檔案)

建檔案夾時，防止遞迴，加上設定檔

// FIS3 會讀取全部項目目錄下的資源，如果有些資源不想被構建，通過以下方式排除。

fis.set(‘project.ignore‘, [

   ‘output/**‘,

   ‘node_modules/**‘,

   ‘.git/**‘,

   ‘.svn/**‘,

   ‘project/**‘   （project建的檔案夾名）

]);

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

發布

首先進入你建的檔案夾，在輸入指令

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的設定檔

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 會讀取全部項目目錄下的資源，如果有些資源不想被構建，通過以下方式排除。

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/images/$1$2‘

})

fis.match(‘*.{png,jpg,gif}‘,{

    packTo: ‘./static/images/$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編輯器裡面也有。

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

sublime補全文法外掛程式

sublime-autoprefixer-master

postcss還有一個px轉化成rem的外掛程式，

postcss安裝px轉化成rem的外掛程式（用fis3構建工具）

npm install fis3-postprocessor-px2rem

sublime編輯器裡有一個為cssrem-master的外掛程式也有這個功能

淺談fis3與postcss