使用 gulp 编译 sass 文件夹 同时 打包压缩
1.需要下载依赖包
下载两个项目依赖包
npm i node-sass 提供 sass 打包编译执行的node环境
npm i gulp-sass sass编译打包的规范
2.在 gulpfile.js 中 制定 sass 规范
(1) .导入依赖包
只需要导入 gulp-sass 依赖包
// 加载 gulp-sass 依赖包
const sass = require('gulp-sass');(2).制定规范
指定打包压缩文件位置
将sass文件 编译 为 css 文件,执行 css 文件的打包规范,存储在 css 文件夹中
// sass打包规范
// 语法1
const sassHandler = function(){
return gulp.src( './src/sass/*.scss' ).pipe( sass() ).pipe( autoprefixer() ).pipe( cssmin() ).pipe( gulp.dest( './dist/css' ) );
}
// 语法2
// 参数1: 打包规范的名称
// 参数2: 打包规范的具体程序,没有return
gulp.task( 'sassHandler' , function(){
gulp.src( './src/sass/*.scss' ).pipe( sass() ).pipe( autoprefixer() ).pipe( cssmin() ).pipe( gulp.dest( './dist/css' ) );
})
Comments | NOTHING