如果你熟悉 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" |
| } |
接着安装其他依赖：
安装模块较多，请耐心等待，若一直安装失败可使用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 |
| "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" |
| } |
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 启动默认任务以测试
