gulp使用手册

作者:你管我管你疯啊

1、gulp 概念

gulp是一个自动化工具,前端开发者可以使用它处理常见任务:
1、搭建web服务器
2、文件保存时自动重载浏览器
3、使用预处理器 sass less
4、优化资源,比如压缩css、js、图片

2、gulp安装

(1)npm 初始化,新建package.json

执行命令:npm install gulp -g

因为在本地需要使用require的方式gulp。(需要进入到项目的路径下面)因此也需要在本地安装一份:

执行命令:npm install gulp --save-dev

(2)先全局安装
(3)在当前需要项目中安装(装两次是为了灵活使用)

3、开始使用gulp

(1)在项目目录下新建gulpfile.js文件

gulp使用手册

(2)gulp的工作方式如下图解释:

gulp使用手册

src方法 dest方法 task方法 watch方法

gulp使用手册
gulp使用手册
gulp使用手册
gulp使用手册
gulp使用手册
gulp使用手册

4、gulp常用的插件:

压缩文件: gulp-uglify
安装命令:npm install --save-dev gulp-uglify
合并文件: gulp-concat
安装命令:npm install --save-dev gulp-concat
修改文件名: gulp-rename
安装命令:npm install --save-dev gulp-rename
压缩css文件: gulp-minify-css
安装命令:npm install --save-dev gulp-minify-css
压缩html文件: gulp-minify-html
安装命令:npm install --save-dev gulp-minify-html
压缩图片文件: gulp-imagemin
安装命令:npm install --save-dev gulp-imagemin
解析sass: gulp-sass
安装命令:npm install --save-dev gulp-sass

5、自动加载插件方法:

gulp使用手册

6、npm常用与报错解决办法

当使用npm进行安装的时候,如果出现:cb() nerver called 的报错,
1.先使用:npm cache verify
2.在使用:npm cache clean
3.可能需要:npm cache clean -—force
重新进行安装需要的包即可

7、gulp版本不一致写法:

gulp使用手册