- 安裝gulp
npm i -g gulp
- 新建項目
mkdir project
cd project
- 進入項目后,還要把gulp在項目內(nèi)安裝一次
npm init --yes #生成package.json文件
npm i -D gulp #-D等價于--save-dev
- 安裝gulp-sass
npm i -D gulp-sass
- 創(chuàng)建gulpfile.js文件
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass',function(){
gulp.src('src/main.scss')
.pipe(sass())
.piipe(gulp.dest('dist/'))
})
這樣每次運行g(shù)ulp sass就可以編譯main.scss文件
-
必備三大技巧
-
sass 的功能挺多掀序，我覺得最重要的有三個：
第一，變量使用蟹瘾。
第二瘟栖，語句嵌套等太。
第三爷耀，文件拆分资柔。
-
- autoprefixer添加廠商前綴
npm i -D gulp-autoprefixer
- gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var prefix = require('gulp-autoprefixer');
gulp.task('sass',function(){
gulp.src('src/main.scss')
.pipe(sass())
.pipe(prefix())
.piipe(gulp.dest('dist/'))
})
gulp.task('copy-assets',function(){
gulp.src('src/*.html')
.pipe(gulp.dest('dist/'))
})
gulp.task('default',['sass','copy-assets']);
- 什么是廠商前綴焙贷？
很多 CSS3 的新屬性，如果你只是寫成下面這樣：
display: flex
- 有的瀏覽器下能生效贿堰，但是其他瀏覽器辙芍，或者同一瀏覽器的比較老得版本中就不生效。需要添加廠商前綴羹与。
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
比如對于 flexbox 沸手，寫成上面這樣才能達成最佳的瀏覽器兼容效果
- 壓縮css加快頁面加載
npm i gulp-minify-css
- gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var prefix = require('gulp-autoprefixer');
var minify = reuquire('gulp-minify-css');
gulp.task('sass',function(){
gulp.src('src/main.scss')
.pipe(sass())
.pipe(prefix())
.pipe(minify())
.piipe(gulp.dest('dist/'))
})
gulp.task('copy-assets',function(){
gulp.src('src/*.html')
.pipe(gulp.dest('dist/'))
})
gulp.task('default',['sass','copy-assets']);
- gulp-imagemin圖片壓縮
npm i -D gulp-imagemin imagemin-pngquant
#imagemin-pngquant 壓縮png圖片
- gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var prefix = require('gulp-autoprefixer');
var minify = reuquire('gulp-minify-css');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
gulp.task('sass',function(){
gulp.src('src/main.scss')
.pipe(sass())
.pipe(prefix())
.pipe(minify())
.piipe(gulp.dest('dist/'))
})
gulp.task('copy-assets',function(){
gulp.src('src/*.html')
.pipe(gulp.dest('dist/'))
})
gulp.task('imagemin', function(){
gulp.src('src/images/*')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
.pipe(gulp.dest('dist/images'));
});
gulp.task('default',['sass','copy-assets','imagemin']);
