gulp基本用法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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的几种方法:

.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基本用法的主要内容,如果未能解决你的问题,请参考以下文章

gulp基本用法

9012教你如何使用gulp4开发项目脚手架

gulp的使用安装

使用 gulp 编译 LESS

gulp教程(中)

gulpwebpack学习笔记