gulp核心知识点目录

gulp

• 不再是简单的使用HTML + CSS + JavaScript 这些技术去构建网页应用。
• 我们要提高效率，就必须减少重复的工作。
• 使用less之类预处理的css
• 提供开发阶段更加便利，更加快捷

gulp 就是一种可以自动化完成我们开发过程中大量的重复工作

• 预处理语言的编译
• js css html 压缩混淆
• 图片体积优化

gulp是一个前端自动化构建工具。

• gulp类似的工具：grunt 、webpack
• gulp是基于node体系的。
• gulp优点：
  • 易于使用
  • 构建快速
  • 插件高质
  • 易于学习

创建一个简单的应用

• gulpfile.js —gulp配置文件

gulp的安装

• 安装nodejs,查看版本：node -v
• 全局安装gulp
• cnpm install gulp -g
• 局部安装gulp
• cnpm install gulp --save-dev (开发依赖包)

常用的gulp插件

插件名	功能
gulp-sass	编译scss
gulp-less	编译less
gulp-autoprefixer	自动添加前缀
gulp-concat	合并文件
gulp-clean-css	压缩css
gulp-webserver	起服务
gulp-htmlmin	压缩html
gulp-imagemin	压缩图片
gulp-uglify	压缩js 不支持ES6
gulp-babel	ES6—>ES5
gulp-rev	生成文件后缀
gulp-rev-collector	替换文件路径
gulp-rename	文件重命名
gulp-babel	编译JS（ES6—>ES5）

• 注：使用 babel（安装成7.0的版本） 需要babel-core和babel-preset-es2015

• cnpm install gulp-babel@7 babel-core babel-preset-env/es2015 -g

扩展的插件

• https://www.npmjs.com/

下载插件

• $ cnpm install gulp-concat gulp-uglify gulp-rename --save-dev （多个插件同时下载）
• $ cnpm install gulp-less gulp-clean-css --save-dev

配置插件

• //gulpfile.js
• var concat = require(‘gulp-concat’);
• var uglify = require(‘gulp-uglify’);
• var rename = require(‘gulp-rename’);
• var less = require(‘gulp-less’);
• var sass = require(‘gulp-sass’);
• var cleanCss = require(‘gulp-clean-css’);

方法使用

- //注册任务

• gulp.task(‘任务名’,function(){

• //逻辑具体任务
  

• })

- //读文件

• gulp.src(“目标文件路径”)

- //输出文件

• gulp.dest(“输出的文件路径”)
• //可以理解为管道，将操作加入到执行队列。
• gulp.pipe()

- //监听文件变更

• gulp.task(‘任务名’, function () {

• gulp.watch('监听文件目录', gulp.series('任务名', '任务名'...));
  

• })

- //设置执行任务顺序（串行）

• gulp.series(“任务名”,“任务名”…)
• //设置执行任务顺序（并行）
• gulp.parallel(“任务名”,“任务名”…)

- //注册多个任务

• gulp.task(‘default’, gulp.series(“任务名”…));

查找规则 说明