如果你熟悉 npm 则可以利用 package.json 保存所有 npm install --save-dev gulp-xxx 模块依赖和模块版本。
在命令行输入
npm init会依次要求补全项目信息，不清楚的可以直接回车跳过
name: (gulp-demo) version: (1.0.0) description: entry point: (index.js) test command: ... ... Is this ok? (yes)最终会在当前目录中创建
package.json 文件并生成类似如下代码：
{
"name": "gulp-demo",
"version": "0.0.0",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/nimojs/gulp-demo.git"
},
"keywords": [
"gulp",
],
"author": "nimojs <nimo.jser@gmail.com>",
"license": "MIT",
"bugs": {
"url": "https://github.com/nimojs/gulp-demo/issues"
},
"homepage": "https://github.com/nimojs/gulp-demo"
}
安装依赖
安装 gulp 到项目（防止全局 gulp 升级后与此项目 gulpfile.js 代码不兼容）
npm install gulp --save-dev此时打开
package.json 会发现多了如下代码
"devDependencies": {
"gulp": "^3.8.11"
}
声明此项目的开发依赖 gulp
接着安装其他依赖：
安装模块较多，请耐心等待，若一直安装失败可使用npm.taobao.org
npm install gulp-uglify gulp-watch-path stream-combiner2 gulp-sourcemaps gulp-minify-css gulp-autoprefixer gulp-less gulp-ruby-sass gulp-imagemin gulp-util --save-dev此时，package.json 将会更新
"devDependencies": {
"colors": "^1.0.3",
"gulp": "^3.8.11",
"gulp-autoprefixer": "^2.1.0",
"gulp-imagemin": "^2.2.1",
"gulp-less": "^3.0.2",
"gulp-minify-css": "^1.0.0",
"gulp-ruby-sass": "^1.0.1",
"gulp-sourcemaps": "^1.5.1",
"gulp-uglify": "^1.1.0",
"gulp-watch-path": "^0.0.7",
"stream-combiner2": "^1.0.2"
}
当你将这份 gulpfile.js 配置分享给你的朋友时，就不需要将 node_modules/ 发送给他，他只需在命令行输入
npm install
就可以检测 package.json 中的 devDependencies 并安装所有依赖。
我们将文件分为2类，一类是源码，一类是编译压缩后的版本。文件夹分别为 src 和 dist。(注意区分 dist 和 ·dest的区别)
└── src/ │ └── dist/
dist/ 目录下的文件都是根据 src/ 下所有源码文件构建而成。
在 src/ 下创建前端资源对应的的文件夹
└── src/
├── less/ *.less 文件
├── sass/ *.scss *.sass 文件
├── css/ *.css 文件
├── js/ *.js 文件
├── fonts/ 字体文件
└── images/ 图片
└── dist/
让命令行输出的文字带颜色
gulp 自带的输出都带时间和颜色，这样很容易识别。我们利用 gulp-util 实现同样的效果。
var gulp = require('gulp')
var gutil = require('gulp-util')
gulp.task('default', function () {
gutil.log('message')
gutil.log(gutil.colors.red('error'))
gutil.log(gutil.colors.green('message:') + "some")
})
使用 gulp 启动默认任务以测试
