在項目中使用gulp的筆記

在項目中如何使用gulp的gulp-sass/gulp-autoprefixer/cp/watch筆記

gulp-autoprefixer官網

在iTerm

首先需先在電腦全局安裝gulp

再在項目中安裝gulp(如已全局安裝過，則僅需在項目中安裝)

npm init (產生 package.json文件)

sudo npm i -D gulp gulp-sass gulp-autoprefixer (安裝相關gulp的包, sass / autoprefixer)

註：-D 等價於 –save-dev

註：在clone其他的專案在不同電腦時，只需 npm install 即可安裝所有在package.json中的包

在sublime中

建立 .gitignore 檔案 ( 裡面輸入 node_modules )

建立 gulpfile.js 檔案

mkdir source 新建一個source的資料夾存放所有原碼

gulpfile.js 中新增以下內容

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

gulp.task('sass', function(){
gulp.src('styles/main.scss') /*來源檔案*/
.pipe(sass()) /*編譯sass成css*/
.pipe(prefix()) /* prefix()加入廠商前綴，()內不加屬性則使用autoprefix的預設值 */
.pipe(gulp.dest('../styles')); /*要輸出的檔案,讓它輸出到source文件夾的上層*/
});

/* gulp copy task */
gulp.task('cp', function(){
gulp.src('index.html') /* 要copy的來源檔案 */
.pipe(gulp.dest('..')); /* 要複製到..的目的檔案位置,如將index.html 複製到上一層的外面*/
});

/* gulp watch task */
gulp.task('watch', function(){
gulp.watch(['*.html'],['cp']); /* 監聽所有 *.html 和 cp task的檔案 */
gulp.watch(['styles/*.scss'],['sass']); /* 監聽style資料夾下所有scss的檔案 */
});


gulp.task('default', ['sass', 'cp', 'watch']); /*執行gulp時一併執行sass cp 和watch的指令 */