直接进入正题吧。说起来真是好久好久都没有更新过bolg了呢……工作忙起来累成狗。现在辞职在家又懒得动。
环境:mac osx
步骤一:安装node。
这一步就不赘述了。直接上https://nodejs.org/en/ 下载安装就可以了。安装完成后打开终端输入
npm -v
查看是否安装成功。看到版本号即为成功
以下为成功提示:
步骤二:安装gulp。
先全局安装gulp,然后要进入你的每个需要用到gulp的项目里单独安装gulp。
打开“终端”,输入
$ npm install gulp -g
全局安装gulp后cd进入你需要用到gulp的项目文件里。建立一个专属于gulp的文件夹。在这个文件夹里创建package.json,记得加上{},保存。如图
接着在终端中输入:
$ npm install gulp --save-dev
上述指令将gulp安装到本地端的项目内,并将记录于package.json
内的devDependencies中
。
步骤三 安装外挂
- 编译less (gulp-less)
- Autoprefixer (gulp-autoprefixer)
- 缩小化(minify)CSS (gulp-minify-css)
- JSHint (gulp-jshint)
- 拼接 (gulp-concat)
- 丑化(Uglify) (gulp-uglify)
- 图片压缩 (gulp-imagemin)
- 即时重整(LiveReload) (gulp-livereload)
- 清理档案 (gulp-clean)
- 图片快取,只有更改过得图片会进行压缩 (gulp-cache)
- 更动通知 (gulp-notify)
在终端输入以下指令一次性安装上述外挂
$ npm install gulp-less gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev
接下来,我们需要建立一个gulpfile.js
档案,并且载入这些外挂
var gulp = require('gulp'),
less = require('gulp-less'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
clean = require('gulp-clean'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload');
步骤四 编译
最基本的写法是把所有任务配置都写在gulpfile.js里.