Gulp基础

1.什么是gulp?

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器。

 

2.为什么使用gulp?

gulp不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成，提高我们的工作效率。

 

3.gulp介绍?

gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。

在实现上，借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。

 

4.基本使用?

a.安装node，npm会随着一并安装。node中文网：http://nodejs.cn/

b.安装完毕，确认安装成功：命令行运行node -v查看node版本；命令行运行npm -v查看npm版本；

c.选装cnpm:npm install cnpm -g --registry=https://registry.npm.taobao.org。确认安装成功，运行cnpm -v查看cnpm版本；

d.全局安装gulp:cnpm install gulp -g。确认安装成功，命令行运行gulp -v查看gulp版本；

e.定位到项目文件夹，将gulp安装到项目本地：cnpm install  gulp --save-dev

f.安装任务依赖，新建新建gulpfile文件。示例如下：

安装依赖（示例gulp-less）：cnpm install gulp-less --save-dev

新建gulpfile.js文件：（一定是gulpfile这个名称）

var gulp = require('gulp'); 
var less = require('gulp-less');

gulp.task('less', function() {
    gulp.src('./less/*.less')
        .pipe(less())
        .pipe(gulp.dest('./css'));
});

g.运行gulp任务:gulp [任务名称]

 

更多细节知识请自行学习。

 

参考文章：

http://www.gulpjs.com.cn/

https://segmentfault.com/a/1190000000372547

http://www.ydcss.com/archives/18