gulp用法及插件

gulp简介：

基于node平台开发的前端构建工具 将机械化操作编写成任务, 简单的说，就是项目准备上线时，用来打包项目的。

有什么作用？

（1）项目上线，HTML、CSS、JS文件压缩合并

（2）语法转换（es6、less ...）

（3）公共文件抽离

（4）修改文件浏览器自动刷新

使用

（1）使用npm install gulp下载gulp库文件

（2）在项目根目录下建立gulpfile.js文件

（3）重构项目的文件夹结构，src目录放置源代码文件，dist目录放置构建后文件

（4）在gulpfile.js文件中编写任务.

（5）在命令行工具中执行gulp任务

提供的方法

• gulp.src()：获取任务要处理的文件
• gulp.dest()：输出文件
• gulp.task()：建立gulp任务
• gulp.watch()：监控文件的变化

const gulp = require('gulp');
// 使用gulp.task()方法建立任务，第一个参数：任务名称，第二个参数：回调函数
 gulp.task('first', () => {
    // 获取要处理的文件
    gulp.src('./src/css/base.css') 
    // 将处理后的文件输出到dist目录
    .pipe(gulp.dest('./dist/css'));
 });

有关插件

• gulp-htmlmin ：html文件压缩

• gulp-csso ：压缩css

• gulp-babel ：JavaScript语法转化

• gulp-less: less语法转化

• gulp-uglify ：压缩混淆JavaScript

• gulp-file-include 公共文件包含

• browsersync 浏览器实时同步

注：有关插件用法可在 npmjs.com  查看。