S1-使用gulp

• 安装gulp

npm i -g gulp

• 新建项目

mkdir project
cd project

• 进入项目后,还要把gulp在项目内安装一次

npm init --yes #生成package.json文件
npm i -D gulp #-D等价于--save-dev

• 安装gulp-sass

npm i -D gulp-sass

• 创建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/'))
})

这样每次运行gulp sass就可以编译main.scss文件

• 必备三大技巧

  • sass 的功能挺多，我觉得最重要的有三个：

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

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