gulp使用

• 
  
• Gulp就是一种可以自动化完成我们开发过程中大量的重复工作，是自动化项目构建工具
  
  • 预处理语言的编译
  • js css html 压缩混淆
  • 图片体积优化
• 除gulp之外还有一些类似的自动化工具，比如grunt
  

gulp中文网：http://www.gulpjs.com.cn/
gulp插件网：http://gulpjs.com/plugins/

安装

• 创建项目文件夹
• 在项目文件夹中创建src文件夹（源文件夹A）、dist文件夹（目标文件夹B）
• 打开命令黑窗口切换到项目文件夹
• 全局安装gulp

npm install gulp -g         全局安装gulp
gulp -v                     测试是否安装成功 

• 初始化 gulp 项目

npm init                    初始化 gulp 项目生成package.json文件

• 安装需要的gulp插件（比如将less文件转换为css文件用“gulp-less”）

npm install gulp --save-dev         作为项目开发依赖"devDependencies"安装gulp
npm install gulp-less --save-dev    安装less插件

在package.json文件中最下面几行开发依赖（devDependencies）多个gulp和gulp-less。

使用

• 项目根目录新建 gulpfile.js 文件 （gulpfile.js 就是gulp的主文件，文件名固定，用于注册任务）gulpfile.js 文件与src文件夹、dist文件夹并排。
  
• 注意：
  
  • 在写任务时，每个任务一定要以分号结束，否则出错
  • 写less文件时，@符号语句下面要空一行，否则出错 。

以下是gulpfile.js文件：

'use strict';

// 载入Gulp模块
var gulp = require('gulp');   // 载入Gulp模块
var less = require('gulp-less');    // 载入gulp-less模块

// 注册一个任务
gulp.task('copy',function(){  // 复制任务
  gulp.src('src/index.html')  //找到源文件
  .pipe(gulp.dest('dist/'));  //备份到dist文件夹下面
});

gulp.task('dist',function(){    //所有监视都在目标文件dist中进行
  gulp.watch('src/index.html',['copy']) //监视src/index.html文件一旦有变动，就执行copy任务
  gulp.watch('src/style/*.less',['less']) //监视src/style/*.less文件，一但变动就执行less任务
});

gulp.task('less',function(){    //转换less文件
  gulp.src('src/style/*.less')   //找到源文件,style下的所有less文件
    .pipe(less()) 
    .pipe(gulp.dest('dist/css'));
});

• 命令行下运行

gulp copy   //gulp + 要运行任务的名字，任务名字是task里的第一个参数。
gulp less   //转换less文件为css文件
gulp dist   //监视

当你修改 src文件夹下的任何文件，命令行都会有内容输出，说明能够监控到文件的变化，运作正常了。

常用插件

• gulp是轻内核的工具，如果想自动化编译less等，得用插件
• 直接到官网去搜插件，然后安装使用，和使用gulp-less一样，官网也有详细文档

gulp官网插件：http://gulpjs.com/plugins/

• 编译 Less：gulp-less
• 编译 Jade: gulp-jade
• 创建本地服务器：gulp-connect
• 合并文件：gulp-concat
• 最小化 js 文件：gulp-uglify
• 重命名文件：gulp-rename
• 最小化 css 文件：gulp-minify-css
• 压缩html文件 gulp-minify-html
• 最小化图像：gulp-imagemin