教你使用 gulp实现前端自动化介绍+实例

node

gulp

检查你的 node 版本和 gulp 版本1、如果没有安装node可以参考我的《CentOS 7下手把手搭建hexo博客》中使用nvm来管理node；2、如果没有安装gulp可以使用npm install --global gulp全局安装 gulp；3、检查你的 node 版本和 gulp 版本；$ node -vv5.0.0$ gulp -v[19:21:35] CLI version 3.9.0[19:21:35] Local version 3.9.0

初始化项目目录使用 npm init 创建一个 package.json 存储依赖关系等配置信息，推荐使用，如图给出一个例子；；创建 gulp 的配置文件 gulpfile.js，开始很简单，如图：使用git init 创建版本库，并简单配置，如果不熟悉git操作可以去官网先看看;

测试gulp命令$gulp如图所示一切ok，现在没有任务；

安装依赖插件$ npm install --save-dev gulp-autoprefixer browser-sync gulp-notify其中：gulp-autoprefixer 根据浏览器版本自动处理添加浏览器前缀browser-sync 能让浏览器实时、快速响应文件更改（html、js、css、sass、less等）并自动刷新页面gulp-notify  用于任务提醒安装过程比较长慢慢等待，不过一定要确认安装成功；安装成功之后package.json会保存插件，当前目录下会创建目录node_modules保存安装的插件；

以 browser-sync 为例来配置 gulpfile.js 文件1、修改gulpfile.js如图所示：2、创建源码目录src；3、终端运行gulp，当修改文件的时候终端会发生变化；