建立一個真實的例子:javascript
建立一個項目,結構如圖css
gulp的使用方法一般是這樣的前端
gulp.task('task-name', function () { return gulp.src('source-files') // source-files是任務的入口文件路徑 .pipe(aGulpPlugin()) // 調用插件 .pipe(gulp.dest('destination')) //destination執行任務輸出文件路徑
})
咱們將使用gulp-sass插件來編譯sass:java
1.安裝插件npm
cnpm install --save-dev gulp-sass
2.在gulpfile.js中引入插件並使用gulp
// gulpfile.js var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function () { return gulp.src('app/scss/style.scss') .pipe(sass()) .pipe(gulp.dest('app/css')) });
3.編寫sass文件sass
// style.scss .testing { width: percentage(5/7); }
4.執行命令 gulp sassapp
咱們將看到在app/css文件夾下生成了style.css文件 工具
.testing { width: 71.42857%; }
styles.css是gulp智動爲咱們生成的。percentage 是Sass的方法。post
使用Sass就這麼簡單。