【Gulp】將css樣式加上前綴增加瀏覽器兼容性

gulp-postcss

在專案中打開終端機安裝gulp-postcss、autoprefixer、cssnano、gulp-sass、sass套件(版本@1.62.0)

1

$ npm install gulp-postcss autoprefixer cssnano gulp-sass sass@1.62.0

在gulpfile.js新增程式碼

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');

gulp.task('sass', function(){
  return gulp
    .src('src/scss/*.*')
    .pipe(sass()
    .on('error',sass.logError))
    .pipe(
      postcss([ 
        autoprefixer(), //使用autoprefixer套件，將編譯完成的CSS做PostCSS處理，確保你的CSS在不同瀏覽器中正確顯示
        cssnano() //使用cssnano套件，去除不必要的空格、注釋從而壓縮和最小化CSS
      ])
    )
    .pipe(gulp.dest('dist/css'));
});

在終端機執行指令

1

$ gulp sass

執行結果會將css樣式加上前綴詞-webkit-讓瀏覽器兼容性更好

you project
├─── node_modules/        
├─── dist/
│     │
│     └─── css/
│           │
│           └─── all.css    #加上前綴詞的css檔
│   
├─── src/
│     └─── scss/
│           │
│           └─── all.scss   #未加上前綴詞的檔
│     
├─── gulpfile.js          
├─── package-lock.json    
└─── package.json

回到index.html引入css

1
2
3


<head>
    <link rel="stylesheet" href="css/all.css">
</head>

回到gulpfile.js啟用cssnano高級轉換組件

1

$ npm install cssnano-preset-advanced

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');

gulp.task('sass', function(){
  return gulp
    .src('src/scss/*.*')
    .pipe(sass()
    .on('error',sass.logError))
    .pipe(
      postcss([ 
        autoprefixer(),
        cssnano({
          preset: "advanced" //更改cssnano變成進階模式
        })
      ])
    )
    .pipe(gulp.dest('dist/css'));
});

啟用postcss-preset-env套件

1

npm install postcss-preset-env

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const postcssPresetEnv = require('postcss-preset-env');

gulp.task('sass', function(){
  return gulp
    .src('src/scss/*.*')
    .pipe(sass()
    .on('error',sass.logError))
    .pipe(
      postcss(
        [ 
          postcssPresetEnv(), //兼容性自動選擇插件
          autoprefixer(),
          cssnano({
            preset: "advanced"
          })
        ]
      )
    )
    .pipe(gulp.dest('dist/css'));
});

啟用postcss-flexbugs-fixes套件

1

$ npm install postcss-flexbugs-fixes

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const postcssPresetEnv = require('postcss-preset-env');
const postcssFlexbugsFixes = require('postcss-flexbugs-fixes');

gulp.task('sass', function(){
  return gulp
    .src('src/scss/**/*.*')
    .pipe(
      sass().on('error',sass.logError)
    )
    .pipe(
      postcss([ 
        postcssFlexbugsFixes(), //修復Flexbox在不同瀏覽器中的一些兼容性問題
        postcssPresetEnv(), 
        autoprefixer(),
        cssnano({
          preset: "advanced" 
        })
      ])
    )
    .pipe(gulp.dest('dist/css'));
});

gulp.task('default', gulp.series('sass'));

最後，在終端機執行gulp即可完成任務

1

$ gulp

gulp

【Gulp】將css樣式加上前綴增加瀏覽器兼容性

node.js、npm、gulp、gulpfile、package.json、gulp-postcss、autoprefixer、cssnano

【Gulp】將css樣式加上前綴增加瀏覽器兼容性

node.js、npm、gulp、gulpfile、package.json、gulp-postcss、autoprefixer、cssnano

gulp-postcss

其他相關