首页 > 代码库 > gulp基本用法

gulp基本用法

2024-08-18 23:05:45   228人阅读

嗨，小伙伴们，大家周五好，又到了一周中最最最期待的周五啦啦~~~

这几天一直在研究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的几种方法：

.pipe( ) //工作流，括号中写gulp方法或者其他插件方法或者js代码，
 
gulp.task（）// 创建任务，
 
gulp.src（）// 获取符合的文件，
 
gulp.dest（）// 输出符合的文件，
 
.pipe(uglify( ) ) // 在工作流中启用js压缩功能，使用其他插件工作同样方法，注意很多插件的使用需要设置参数
 
代码示例：gulp.task("taskname",["taskname1","taskname2"],function( ){ return gulp.src("/app/css/**/*.css",{base:"app"}).pipe(uglify( )).pipe(gulp.dest("/dist"))   });
再例如：

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基本用法


联系
我们