构建工具gulp之入门指南

构建工具gulp之入门指南

什么是gulp

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

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

安装gulp

一、安装Node

node.js官方安装包及源码下载地址:http://nodejs.org/download/

安装步骤参考:http://www.runoob.com/nodejs/nodejs-install-setup.html

—————————————————————————————————

二、安装gulp

步骤1

以全局方式安装gulp,打开命令提示符执行下列命令(打开方式:window + r 输入cmd回车)输入下面命令,然后回车:

 npm install -g gulp    

步骤2

全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次。全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能。把目录切换到你的项目文件夹中,然后在命令行中执行:

  npm install gulp  

步骤3

如果想在安装的时候把gulp写进项目package.json文件的依赖中,则可以加上–save-dev:

npm install --save-dev gulp

这样就完成了gulp的安装,接下来就可以在项目中应用gulp了。

应用gulp

建立gulpfile.js文件

gulp也需要一个文件作为它的配置文件,在gulp中这个文件叫做gulpfile.js。新建一个文件名为gulpfile.js的文件,然后放到你的项目目录中。之后要做的事情就是在gulpfile.js文件中定义我们的任务了。下面是一个最简单的gulpfile.js文件内容示例,它定义了一个默认的任务。

var gulp = require('gulp'); //本地安装gulp所用到的地方
gulp.task('default',function(){//定义默认任务
    console.log('My first gulp project!');
});

目录结构如下:

执行任务,输入命令:

gulp

默认的名为 default 的任务(task)将会被运行,在这里,这个任务做的事情是在控制台打印:My first gulp project!,效果如下:

总结

本文简单的介绍一下gulp安装及项目的创建过程,下一篇我将介绍gulp使用的主要API。

猜你喜欢

转载自blog.csdn.net/RJ0024/article/details/84999744