gulp介绍及less插件详解

GULP是前端开发过程中对代码惊醒构建的工具，是自动化项目的利器，能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成，使用它，我们不仅可以愉快地编写代码，还大大提高了我们的工作效率。

GULP基于Nodejs的自动任务运行器，他能自动的完成javascript/coffee/sass/less/html/image/css等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新，部署文件生成，并监听文件再改动后重复指定的这些步骤。在实现上，他借鉴了Unix操作系统的管道思想，前一级的输出直接变为后一级的输入，使得在操作上非常简单。

安装Gulp：

gulp是基于Node.js环境运行的，所以我们首先要安装node.js环境。

1.node.js的安装：

1）.下载nodejs安装包

在nodejs官网下载软件 https://nodejs.org/en/

2）.安装nodejs

在 Window 系统中直接下一步下一步式安装。安装好后 WIN+R 输入 cmd 调出 DOS 窗口，输入 node -v 看看是否有版本信息，如果没有则查看系统变量 Path，把 path 配置上去。

3）.a.安装cnpm

 执行命令

 npm install cnpm -g --registry=https://registry.npm.taobao.org

 b.检测cnpm是否安装成功

  执行 cnpm -v 显示版本号即安装成功

4）.全局安装gulp

打开Node.js command prompt 或者 cmd命令提示符

输入命令：cnpm install  -g gulp

输入gulp-v，看看是否有版本信息

2.项目文件根目录新建package.json

文件重要内容

进入你的项目文件

例如：进入D:/ww/test项目文件中

执行命令 cnpm init 来新建package.json

检测package.json是否成功新建

查看项目文件根目录，是否新建package.json，且内容是否与你终端输入的一致。

注：可不使用cnpm init方式，可选择手动创建package.json配置文件

3.本地安装gulp

建立项目，创建package.json和gulpfile.js文件

执行命令：cnpm install gulp --save-dev

安装本地gulp

安装相关插件

gulp提供了大量常用插件，供我们使用，下面给大家介绍一些常用的

    1）saaa的编译（gulp-sass）

    2）less变异（gulp-less)

    3）重命名（gulp-rename）

    4）自动添加css前缀（gulp-autoprefixer)

    5)压缩css（gulp-clean-css）

    6）js代码校验（gulp-jshint）

    7）合并js文件（gulp-concat)

    8）压缩图片（gulp-imagemin)

     9）更改提醒（gulp-notify)

less插件

less使用gulp-less，安装 cnpm install -save-dev gulp-less

在Gulpfile.js 执行如下代码：

var gulp=require('gulp'),
 var less=require("gulp-less");
gulp.task('test-less',function(){
gulp.src('src/less/*.less')
.pipe(less())
.pipe(gulp.dest('dist/css'));
});

执行任务:gulp test-less
***别的插件根据上边的例子进行操作。

今天先介绍到这里，下次继续。