第三方模块Gulp的使用

第三方模块Gulp的使用

gulp的使用

gulp介绍

1. 基于node平台开发的前端构建工具
2. 将机械化操作编写成任务，想要执行机械化操作时执行一个命令行，命令任务就能自动执行了
3. 可以提高开发效率

Gulp能做什么

Gulp的使用步骤

1. 使用npm install gulp 下载gulp库文件
2. 在项目根目录建立gulpfile.js文件
3. 在重构项目的src目录中放置源代码文件，dist目录放置构建后的文件，dist文件夹不需要建立，在执行代码的过程中会自动创建一个dist文件夹
4. 在gulpfile.js文件中编写任务
5. 在命令行工具中执行gulp任务

Gulp中提供的方法

代码演示

const gulp = require('gulp');
gulp.task('one',()=>{
	gulp.src('./src/html/*')
		.pipe(gulp.dest('./dist/html'))
})

Gulp插件

代码演示(以压缩css为例)

// 先安装gulp-csso插件
npm install gulp-csso 
// 引入
var gulp = require('gulp');
var csso = require('gulp-csso');
//在gulpfile.js中写入任务
gulp.task('cssmin', (done) => {
        gulp.src(['./src/css/*.css', './src/css/*.less'])
            .pipe(less())
            .pipe(csso())
            .pipe(gulp.dest('dist/css'))
        done()
    })
// 在根目录执行
gulp cssmin