gulp初体验

标签：

项目流程

安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务

常用命令简介：

node -v 查看node版本
npm -v 查看npm版本
cd 定位到目录，用法：cd + 路径 ；
dir 列出文件列表；
cls 清空命令提示符窗口内容

安装包
npm install <name> [-g] [--save-dev]
-g：全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm，并且写入系统环境变量；  非全局安装：将会安装在当前定位目录；  全局安装可以通过命令行在任何地方调用它，本地安装将安装在定位目录的node_modules文件夹下，通过require()调用；
--save：将保存配置信息至package.json（package.json是nodejs项目配置文件）；
-dev：保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点；
为什么要保存至package.json？因为node插件包相对来说非常庞大，所以不加入版本管理，将配置信息写入package.json并将其加入版本管理，其他开发者对应下载即可（命令提示符执行npm install，则会根据package.json下载所有需要的包）。

安装指定版本包
npm install -g npm@3.5

更新插件
npm update <name> [-g] [--save-dev]

删除插件
npm uninstall <name> [-g] [--save-dev]

生成package.json
npm init

安装本地插件
npm install [name] --save-dev

以下为测试“gulp-livereload”浏览器自动刷新代码：

谷歌浏览器或火狐安装livereload插件(必须此插件方能生效)
安装方法：谷歌浏览器安装crx插件方法、火狐浏览器直接将xpi文件拖进浏览器即可安装。点击下载（谷歌为.crx文件，火狐为.xpi文件）

注：安装方法在chrome测试通过，firefox安装时提示未通过验证，不支持IE。

package.json

 1 {
 2   "name": "myapp",
 3   "version": "1.0.0",
 4   "description": "",
 5   "main": "index.js",
 6   "scripts": {
 7     "test": "echo \"Error: no test specified\" && exit 1"
 8   },
 9   "author": "",
10   "license": "ISC",
11   "devDependencies": {
12     "gulp": "^3.9.1",
13     "gulp-livereload": "^3.8.1"
14   }
15 }

gulpfile.js

 1 // 监听all变化
 2 var gulp = require(‘gulp‘), //本地安装gulp所用到的地方
 3     livereload = require(‘gulp-livereload‘);
 4 gulp.task(‘All‘, function() {
 5     gulp.src(‘src/**‘)
 6         .pipe(livereload());
 7 });
 8 gulp.task(‘watchAll‘, function() {
 9     livereload.listen();
10     gulp.watch(‘src/**‘, [‘All‘]);
11 });
12 //gulp.task(name[, deps], fn) 定义任务  name：任务名称 deps：依赖任务名称 fn：回调函数
13 //gulp.src(globs[, options]) 执行任务处理的文件  globs：处理的文件路径(字符串或者字符串数组) 
14 //gulp.dest(path[, options]) 处理完后文件生成路径

cd到当前目录，执行命令“gunp watchAll”。

运行项目http://localhost/....，注意，必须使用http[s]协议，file协议不生效。

当修改src目录里面文件时，浏览器会自动刷新。

gulp初体验

标签：

原文地址：http://www.cnblogs.com/linx/p/5431759.html