首页 > 代码库 > gulp基本用法
gulp基本用法
嗨，小伙伴们，大家周五好，又到了一周中最最最期待的周五啦啦~~~
这几天一直在研究gulp的使用方法，今天抽时间来整理一下基本步骤。
gulp 的使用流程： 安装nodejs ->安装git（方便调出命令窗口，可选） -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务
1.gulp是基于node开发的工具，所以在使用gulp前，必须先安装node.js，安装步骤很简单，从网上下载一个node安装包，一步一步进行安装即可，我的安装包是node-v4.4.4-x64.msi版本
。
2.为了调用命令窗口方便，我们在本地安装git，git的安装也非常简单哦，从网上下载一个git安装包，一步一步进行安装即可，我的安装包是Git-2.7.2-64-bit_setup.exe
。
3.接下来是全局安装gulp，全局安装的意思，就是整个电脑里，有gulp的环境，全局安装是在命令窗口安装的，接下来，随便在桌面右击，点击gitBash 后，输入命令 npm install gulp然后回车，进行全局安装gulp。 
。
4 开始创建项目，
4.1首先创建一个英文的文件夹，比如project文件夹，打开文件夹，在文件夹的空白处右击，出现gitBash——>点击gitBash后，调出命令窗口，输入命名：npm init 回车，这时候，细心的你们会发现，project文件夹里出现一个package.json文件。
4.2然后再在项目中安装gulp，一般情况，有人反映不用局部安装，不过，个人建议，局部安装gulp还是比较靠谱些，哈哈。在命令窗口中，输入命令：npm install gulp --save-dev回车 
此时，你们会发现，项目文件夹里，又多出来一个node_modules文件夹，
接下来，所有的插件安装，都会安装在node_modules文件夹里面。安装插件都在命令中执行，比如安装replace插件，输入命令：npm install gulp-replace回车，
。 比如安装saas ： npm install gulp-ruby-sass --save-dev。
4.3在项目根目录下，创建src文件夹，src文件夹是放入html页面，创建dist文件夹，dist文件夹用来盛放自动生成后的html页面。
4.4在项目根目录下创建gulpfile.js文件，以下所有js都将卸载gulpfile.js文件里。
4.5命令 var gulp = require("gulp"); 获取gulp模块，获取其他模块方法同样。比如 var replace = require("gulp-replace")获取替换模块;
4.6gulp的几种方法：
var gulp = require("gulp");
var replace = require("gulp-replace");
gulp.task("lyx",function(){
gulp.src("./src/html/**/*.html")
.pipe(replace(/<title>.*?<\/title>/gi,"<title>刘雨熙网站</title>"))
.pipe(replace(/tppabs\s?=\s?[‘"].*?["‘]/gi,""))
.pipe(gulp.dest("./dist/html/"));
});
5.开始运行gulp项目，输入命令：gulp lyx ，其中lyx就是上一列中创建的任务名称。
6.转移、复制项目时，只需把gulpfile.js 、package.json、和项目文件复制过去即可，无需复制node_modules文件夹，复制到目标文件夹后，右击根目录文件夹，启用命令工具，如git，输入命令：npm install ，会自动根据package.json中的安装目录逐一安装node_modules文件夹内的插件。
好了，到此，我想大家应该对gulp有个大概的了解了，以上就是我这几天研究总结出来的东西，希望对大家有所帮助。
gulp基本用法