第三方模块Gulp的使用
gulp的使用
gulp介绍
- 基于node平台开发的前端构建工具
- 将机械化操作编写成任务,想要执行机械化操作时执行一个命令行,命令任务就能自动执行了
- 可以提高开发效率
Gulp能做什么
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c823a003e95098741c5ed622cacb9f7e.png)
Gulp的使用步骤
- 使用npm install gulp 下载gulp库文件
- 在项目根目录建立gulpfile.js文件
- 在重构项目的src目录中放置源代码文件,dist目录放置构建后的文件,dist文件夹不需要建立,在执行代码的过程中会自动创建一个dist文件夹
- 在gulpfile.js文件中编写任务
- 在命令行工具中执行gulp任务
Gulp中提供的方法
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/430fd8025293bbe5f0367a2dceb48000.png)
代码演示
const gulp = require('gulp');
gulp.task('one',()=>{
gulp.src('./src/html/*')
.pipe(gulp.dest('./dist/html'))
})
Gulp插件
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8caa30b0bd3fd084f2cea17312e67621.png)
代码演示(以压缩css为例)
npm install gulp-csso
var gulp = require('gulp');
var csso = require('gulp-csso');
gulp.task('cssmin', (done) => {
gulp.src(['./src/css/*.css', './src/css/*.less'])
.pipe(less())
.pipe(csso())
.pipe(gulp.dest('dist/css'))
done()
})
gulp cssmin