Gulp 的学习笔记

安装

npm install gulp

gulp with ES6

npm install babel-core

mv gulpfile.js gulpfile.babel.js

.js can be writen by ES6

gulp with project

core

  • gulp 核心文件
  • babel-core js => ES6
  • gulp-load-plugins 加载package.json中的依赖文件

js css html

  • gulp-uglify AND gulp-minify-css gulp-cssshrink AND gulp-minify-html 压缩js css html
  • jshint js语言错误检测
  • sprity sproty-sass css雪碧图生成
  • auto-prefixer css自动生成浏览器兼容性前缀
  • gulp-sass AND gulp-less sass less => css
  • gulp-sourcemaps 生成map文件

file

  • gulp-rename 重命名
  • gulp-clean 删除文件
  • gulp-imagemin imagemin-pngquant 图片压缩
  • gulp-tinypng 调用tinppngAPI压缩图片
  • vinyl-source-stream 引入nodejs文件并转换成vinyl数据流
  • gulp-concat 合并文件

project

  • browser-sync 浏览器同步刷新
  • gulp-rev gulp-rev-collector gulp-static-hash 版本控制
  • gulp-zip 代码文件打包上传
  • opn 使用浏览器打开
  • gulp-sftp 上传到ftp服务器
  • gulp-qn 七牛云存储
  • gulp-webpack webpack打包
  • gulp-notify 消息提醒
  • gulp-plumber 忽略错误继续执行

others

  • gulp-if 逻辑if
  • run-sequence 顺序执行任务
  • yargs 解析终端命令参数 if(yargs.(w|p|s)){}
  • -p port,
  • -w watch,
  • -s 启动服务器
  • gulp -s -p 3000 -w

推荐阅读更多精彩内容

  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 2,649评论 1 26
  • 前言 本文默认你已经安装好node环境,并且熟悉node命令,和window cd命令。 gulp简介 基于nod...
    9I阅读 1,192评论 4 17
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    依依玖玥阅读 2,044评论 6 54
  • 参照Gulp for Beginners来学习Gulp基本内容。以下为学习记录笔记。 安装Gulp 首先需要安装N...
    JenniferYe阅读 1,642评论 1 17
  • -- 1. Gulp VS webpack 比较 Gulp 是一个任务管理工具,让简单的任务更清晰,让复杂的任务易...
    慢清尘阅读 1,715评论 7 16