• 安裝gulp

npm i -g gulp

• 新建項(xiàng)目

mkdir project
cd project

• 進(jìn)入項(xiàng)目后,還要把gulp在項(xiàng)目?jī)?nèi)安裝一次

npm init --yes #生成package.json文件
npm i -D gulp #-D等價(jià)于--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/'))
})

這樣每次運(yùn)行g(shù)ulp sass就可以編譯main.scss文件

• 必備三大技巧

  • sass 的功能挺多，我覺得最重要的有三個(gè)：

    第一，變量使用。
    第二，語句嵌套。
    第三，文件拆分。

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;

比如對(duì)于 flexbox ，寫成上面這樣才能達(dá)成最佳的瀏覽器兼容效果

• 壓縮css加快頁(yè)面加載

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']);