前端自动化构建工具 Gulp 使用

一个月没写博客了，今天有时间，就写个gulp的入门使用吧。。

简介：gulp是一个前端自动化构建工具，能够实现代码的检查、压缩、合并……等等，gulp是基于Node.js的自动任务运行器

1、安装Node

　　去Node官网下载安装，因为5.0版本的改变比较大，下载4.2.2稳定版便可

　　如下操做都是在命令行环境中执行：

node -v        //可查看安装Node的版本号，有即为安装成功

2、经过npm安装Gulp

 　　npm（node package manager）nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）；

npm install -g gulp         //-g 是全局(global)安装，在任何目录下均可以使用

gulp -v                     //可查看安装gulp的版本，有即为安装成功

3、在项目中使用Gulp完成自动化构建

　　经过命令行进入你的项目目录，cd 命令就能够，如今个人项目根目录是 C:\gulpdemo\

　　注: 由于在向项目中安装gulp的时候，项目名会直接默认你的文件夹的名字命名为项目名，

　　　　因此在建立项目文件夹时命名不要使用关键字相似gulp以及模块名等。

　　一、初始化项目

// 当前目录：C:\gulpdemo\
npm init　　　　　　　　    // 经过这个命令初始化项目，中间会要求设置几个基本设置，不须要直接回车便可

　初始化以后会在项目根目录出现  package.json 文件

　npm在package.json文件中管理项目的依赖项以及项目的元数据。node执行js中require的时候，也会根据package.json中的依赖项查找。

　　二、在项目中安装gulp以及一系列须要用到的gulp插件

npm install gulp --save-dev              //--save-dev的做用是让gulp依赖进项目中，在package.json中记录起来

npm install gulp-less --save-dev         //gulp-less插件，用于将less样式编译为css样式文件，至关于koala的less编译

npm install gulp-uglify --save-dev       //gulp-uglify插件，用于对js文件进行压缩操做

npm install gulp-minify-css --save-dev   //gulp-minify-css插件，用于对css样式进行压缩操做

npm install gulp-imagemin --save-dev     //这两个插件用于图片的无损压缩
npm install imagemin-pngquant --save-dev

npm install gulp-livereload --save-dev   //自动刷新页面，妈妈不再用担忧 F5 被按坏了

　　三、在根目录中新建 gulpfile.js 文件

 　以less编译插件为例：

//加载模块
var gulp = require("gulp");
var less = require("gulp-less");
//less编译
gulp.task("less", function(){
    gulp.src('src/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('src/css'));
});

gulp less                        //进入项目根目录运行命令便可启动任务操做

　　项目代码放在 C:\gulpdemo\src\ 里面，代码检查压缩处理以后自动存在 C:\gulpdemo\dist\ 里做为发布代码

　●  我写好的gulpfile.js文件包括上面的压缩功能，能够根据须要的功能寻找gulp插件进行拓展，要的人多就放上来，比较简单，少的话就不放了

代码地址 go go go

 转载请注明： http://www.cnblogs.com/zhangmingze/p/4953704.html