gulp使用（一）

一. 安装

1. 安装nodeJS

2. npm install gulp -g（全局安装gulp）

3. 进入项目

　　npm init （新建package.json）

　　npm install --save-dev gulp （安装gulp）

　　npm install --save-dev gulp-less （安装gulp插件）

　　以下为gulp各插件名及功能：

     gulp-load-plugins     加载插件

　　gulp-rename           重命名

　　gulp-uglify　　　　  压缩js

　　gulp-minify-css       压缩css

　　gulp-minify-html    压缩html

　　gulp-imagemin       压缩图片 

　　gulp-jshint             js代码检查

　　gulp-concat            文件合并

　　gulp-less                编译less

　　gulp-sass               编译sass

　　gulp-watch            监听文件

　　require-dir             管理task

4. 项目文件内新建gulp文件夹，gulpfile.js文件

　　gulpfile.js：

// 引入管理task的插件
var requireDir = require('require-dir');

// 任务文件夹路径
requireDir('./gulp/task', { recurse: true});

5. gulp文件夹下，新建task文件夹，config.json文件，task内包含多个任务文件　　

config.json:

// 源文件路径
var src = "./src";
// 生成文件路径
var dest = "./dist";

// 输出配置对象
module.exports = {
    less : {
        all : src + "/css/**/*.less",
        src : src + "/css/*.less",
        dest : dest + "/css",
        settings : {

        }
    }
}

default任务：

var gulp = require("gulp");

gulp.task('default',['less']);

less任务：

var gulp = require('gulp');
var less = require('gulp-less');
var config = require('../config').less;

gulp.task('less', function(){
    return gulp.src(config.src)         //less源文件
        .pipe(less(config.settings))    //执行编译
        .pipe(gulp.dest(config.dest))   //输出目录
});

watch任务：

var gulp = require('gulp');
var watch = require('gulp-watch');
var config = require('../config');

gulp.task('watch', function(){
    watch(config.less.all, function(){  //监听所有less
        gulp.start('less');             //出现修改、立马执行less任务
    })
})

目录结构：