一次Gulp的实践

首先先安装好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