首先先安装好gulp
npm install -g gulp
创建好以下文件
1.png
安装并引入我要使用的插件
sourcmaps 在原始代码定位错误的工具
cssnano css压缩工具
所有使用的插件 都去npm找， 找到合适的 并且 使用人数非常多的成熟插件
npm install --save-dev gulp-cssnano gulp-sourcemaps
// var gulp = require('gulp')
const { src, dest, parallel, watch} = require('gulp')
//css压缩工具
var cssnano = require('gulp-cssnano')
//在原始代码定位错误的工具
var sourcmaps = require('gulp-sourcemaps')
function css() {
return src('./src/css/**/*.css')
.pipe(sourcmaps.init())
.pipe(cssnano())
.pipe(sourcmaps.write('.'))
.pipe(dest('./dest'))
}
watch('./src/css/**/*.css', function(){
console.log('css change')
})
exports.css =css;
exports.default = parallel(css)
写完代码之后 运行 gulp css 就可以看到文件夹发生以下变化 css被打包到了dest里，并且有一个map文件来定位报错
2.png
还运用了一个watch的api 当我们修改相应css文件时，就会执行回调函数
3.png
接下来就可以在html文件里面引入这个打包好的css来使用了
<link rel="stylesheet" href="./dest/a.css">
//2019-8-27
