Gulp自動編譯增加CSS前綴

目的

自動編譯增加CSS前綴
手動編譯工具請參考這裏

檔案架構

.
├── css
│   └── styles.css
└── index.html

安裝node.js

去node.js官網下載node.js

安裝gulp

終端機cd到目前編輯的資料夾，輸入以下指令

npm init

不管他回啥都按enter
接著再輸入以下指令

npm install gulp -g

新增gulpfile.js

.
├── css
│   └── styles.css
├── index.html
└── gulpfile.js

再回到terminal輸入指令

npm install gulp gulp-autoprefixer --save-dev

編輯gulpfile.js

在gulpfile.js新增以下程式碼

var gulp=require('gulp');
var autoprefixer=require('gulp-autoprefixer');

gulp.task('style', function(){
    gulp.src('css/style.css')
        .pipe(autoprefixer())
        .pipe(gulp.dest('build'))
})

再到terminal輸入指令

gulp styles

編譯完成後，會出現build資料夾，裡面有styles.css，內容是自動完成前綴的CSS檔案
往後只要把html的<link>換成dist的CSS就能引入有完整前綴的檔案

<link ref="stylesheet" href="dist/styles.css" />

watch 存檔同時編譯

在gulpfile.js下方新增以下程式碼

gulp.task('watch', function(){
    gulp.watch('css/styles.css', ['styles']);
})

再回到terminal

gulp watch

就能看到系統會隨時監控style.css，只要一偵測到存檔，就會即時做編譯