gulp完全安装教程

直接进入正题吧。说起来真是好久好久都没有更新过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里.