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有个大概的了解了,以上就是我这几天研究总结出来的东西,希望对大家有所帮助。

时间: 2024-08-16 03:00:08

gulp基本用法的相关文章

自动化构建工具—gulp的用法简单总结

把之前用到的gulp总结整理下,有时候说不出来的,就写出来吧,做个笔记,以后也可以慢慢补充 cnpm i --save-dev gulp 把nodejs模块写到package.json配置文件中,当保存到git仓库时,只需保存package.json即可 用到的gulp模块有:gulp-clean/gulp-concat/gulp-connect/gulp-cssmin/gulp-less/gulp-load-plugins/gulp-uglify/open 注:安装node模块是可批量安装的 

nodejs编译sass模块包 node-compass,与gulp包gulp-sass使用方法

简介:node express或者就是node项目中,要自动编译sass方法很多,比如gulp 比如考拉,比如今天我想说的这个包node-compass. 方法一: 命令行编译sass: 方法二:gulp-sass 方法三:node-compass 方法一: 命令行编译sass: 1 compass compile 回车确认即可生成对应的css代码 方法二:gulp-sass 1.前提条件: 电脑中安装有ruby, 项目中已经安装与配置好基本的gulp(配置与安装本文不介绍.gulp基本用法也不

一篇迟到的gulp文章

前言 这篇文章本应该在去年17年写的,但因为种种原因没有写,其实主要是因为懒(捂脸).gulp出来的时间已经很早了,16年的时候还很流行,到17年就被webpack 碾压下去了,不过由于本人接触gulp的时候比较晚,16年的时候才听说有这么个玩意,正真用它是在17年的时候,但是虽然现在webpack已经大行其道,我们每个人都 在积极去拥抱它,不过gulp在现在来说也并不是一无是处,还是有用到的地方,所以,这篇文章我觉得还有有必要写的,就当做是为gulp写的最后一篇文章吧 ,做技术就是 这么辛苦,

我在项目中是这样用 gulp-sass的

一直想用sass来着,可是懒癌症一直犯病.趁着最近事情不多,所以就把配置文件写好,毕竟这是能够提高工作效率的事情,早点处理好早点用上. 因为项目有点大,样式文件很多.如果全部重构是一件非常费心费力的事,并且一不小心改错了把文件覆盖,线上页面很有可能受影响. 所以考虑再三,旧的项目继续正常维护,不再用sass重构.有新的需求再用sass来写,这样既不影响线上页面,也让后来接手的新同事能快速上手. 新的目录结构是这样了: wxstyle是总目录与gulpfile.js存放在根目录,把PC端和移动端单

Animate.css 教程

animate.css 是一个有趣,酷炫的,跨浏览器的动画库,你可以将它用于你的项目中.不管是主页,滑动切换,又或者是其它方面,你都可以通过它来制作出惊人的效果. 基本用法 引入CSS文件 这个对你来说应该再容易不过了,我相信你可能也已经对引入外部的CSS样式文件的代码以及快捷键也都背得滚瓜烂熟了. 你只需要在HTML文件的head标签中引入CSS样式文件,如下: <head> <link rel="stylesheet" href="animate.min

Gulp的常见用法

Gulp 用法 Gulp 的安装部署 首先安装 gulp 全局安装gulp 命令行工具 npm i -g gulp-cli 全局安装 npm i -g gulp 在项目的根目录创建一个 gulpfile.js 的文件 Gulp 中的方法 gulp.src():获取任务要处理的文件 gulp.dest():输出文件 gulp.task(): 建立 gulp任务 参数一:任务的名称 参数二:任务的回掉函数 gulp.watch():监控文件发生的变化 const gulp = require('gu

关于gulp的简单用法

1.1. npm -Node的包管理工具 node package manager npm官网 淘宝镜像 cnpm 1.2. 安装 node 下载node的安装包,直接安装 1.2.1. 验证是否安装成功 1 使用win + r键,打开运行窗口 2 输入cmd,敲回车,进入到命令行工具 3 输入node -v,检测node是否安装成功 4 输入npm -v,检测 npm 1.2.2. 使用淘宝镜像 npm config set registry https://registry.npm.taob

作业:1、scss、less的区别用法 、gulp 、cmd命令

一.sass/scss 和 less的区别 一. Sass/Scss.Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量.嵌套.运算,混入(Mixin).继承.颜色处理,函数等),更容易阅读. Sass与Scss是什么关系? Sass的缩排语法,对于写惯css前端的web开发者来说很不直观,也不能将css代码加入到Sass里面,因此sass语法进行了改良,Sass 3就变成

前端构建工具的用法—grunt、gulp、browserify、webpack

随着前端项目的飞速发展,项目越来越大.文件越来越多,前端工程化的工具也越来越多.下面介绍目前最流行的四种构建工具——grunt.gulp.browserify.webpack 所有的构建工具都是基于NodeJs和Npm,所以使用下面任何工具都需要安装Node 一.grunt 1.需要两个文件: Gruntfile.js —— grunt执行任务文件:描述项目会执行的任务. package.json —— 工程描述文件:描述项目基本信息,和项目中使用到的npm包信息,方便其他人了解项目信息.跑起来