- 安装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 的功能挺多，我觉得最重要的有三个：
第一，变量使用。
第二，语句嵌套。
第三，文件拆分。
-
- 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']);
