前端构建工具之gulp的配置与搭建详解

前言

在如今的前端开发中，已经不再是一些静态文件了。

对于很多Web App来说，前端代码甚至比后端更加复杂，更加难以管理，这主要来源于一下几个方面：

1、许多第三方库的依赖需要自动运行

2、独立的前端测试需要自动运行

3、代码需要发布时打包

一、为什么要使用gulp？

在我们的工作流程里，应该尽量减少重复的工作，很多任务都可以自动去执行，比如一些相关文件的操作，自动监视一些文件的变化，发生变化以后，就去执行事先设计好的任务。

说了这么多，那么gulp到底能做什么？

a.创建项目工程

b.压缩各类文件

c.文件合并

d.自动化监视

e.实时调试代码

f.编译less,Sass,CoffeeScript......等等

二、gulp是基于node开发运行的，所以我们可以使用npm的包管理工具去安装它。

要使用npm，就必须安装node。node安装很简单，只需下一步即可，这里不再赘述。

在gulp下载配置前，我们先搭建好本地项目文件：


文件构架树

完成以后，在控制台cdm调出控制台输入以下命令：

1、npm install -g gulp //-g 代表全局安装 （ 如果不是全局安装你是用不了的）

2、cd 你的项目路径 npm init //package.json

3、npm install gulp --save-dev


配置完成的文件构架树

注：gulpfile.js这个文件的名字是不能改变的。

三、gulp的配置以及任务

在gulpfile.js这个文件中输入一下：


引入gulp

第一个实例

gulp运行

到这里基本配置就可以了。

总结

以上就是这篇文章的全部内容了，下一篇我们开始说说gulp语法。希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • 前端构建工具之gulp的语法教程

    前端构建工具之gulp的语法教程

    前言 上一篇说了下gulp的环境搭建以及配置,这一篇说说gulp的语法. 语法说来其实很简单,主要有以下4种: gulp四种语法 现在我们把src下面的index.html文件copy到发布文件夹dist下: 复制单个文件 webstorm下运行 . 点击运行 如此,便有: dist文件夹下更新 复制多个文件 复制到某个特定的文件夹下 每次运行之前都需要更新一下 最终 复制指定文件 排除某个文件 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家

  • Angular.js项目中使用gulp实现自动化构建以及压缩打包详解

    gulp介绍 基于流的前端自动化构建工具,利用gulp可以提高前端开发效率,特别是在前后端分离的项目中.使用gulp能完成以下任务: 压缩html.css和js 编译less或sass等 压缩图片 启动本地静态服务器 其他 目标 一键安装项目所有的依赖模块 一键安装项目所有的依赖库 代码检查确保严格语法正确 能将angularjs的html装换成js模块并且压缩到js文件中 将所有css文件合并压缩 将所有的js文件合并压缩 动态引入资源文件 拥有开发环境和生产环境两种打包方式 工具 npm基于

  • 详解前端构建工具gulpjs的使用介绍及技巧

    gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快.如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧. 1.gulp的安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm install -g gulp 全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次

  • 前端构建工具之gulp的配置与搭建详解

    前端构建工具之gulp的配置与搭建详解

    前言 在如今的前端开发中,已经不再是一些静态文件了. 对于很多Web App来说,前端代码甚至比后端更加复杂,更加难以管理,这主要来源于一下几个方面: 1.许多第三方库的依赖需要自动运行 2.独立的前端测试需要自动运行 3.代码需要发布时打包 一.为什么要使用gulp? 在我们的工作流程里,应该尽量减少重复的工作,很多任务都可以自动去执行,比如一些相关文件的操作,自动监视一些文件的变化,发生变化以后,就去执行事先设计好的任务. 说了这么多,那么gulp到底能做什么? a.创建项目工程 b.压缩各

  • JavaScript前端构建工具原理的理解

    目录 前言 构建工具的前世今生 YUI Tool + Ant Grunt / Gulp Webpack / Rollup / Parcel Vite / Esbuild js 模块化的发展史和构建工具的变化 青铜时代 白银时代 黄金时代 结束语 前言 最近有幸在前端团队里面做了一次关于 webpack 的技术分享.在分享的准备过程中,为了能让大家更好的理解 webpack,特意对市面上以前和现在流行的构建工具做了一个梳理总结.在整理和分享的过程中,获益匪浅,对前端构建工具有了新的认识.在这里,将

  • GIT相关-IDEA/ECLIPSE工具配置的教程详解

    GIT安装 访问: https://git-scm.com/downloads ,进入git'下载页面,根据个人操作系统下载对应软件版本,默认下载最新版: 双击安装即可.选择安装目录和安装内容,如果只是单纯的使用,默认即可. 安装TortoiseGit 安装前,确认Git已安装好,否则TortoiseGit是装不上的. 访问 : https://tortoisegit.org/download/,选择对应的操作系统位数软件下载, 双击软件,点击next,默认安装即可 生成秘钥 开始菜单找到git

  • Mybatis环境配置及测试详解

    mybatis 3 | 参考文档 MyBatis 是一款优秀的持久层框架,它支持自定义 SQL.存储过程以及高级映射.MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工作. MyBatis 可以通过简单的 XML 或注解来配置和映射原始类型.接口和 Java POJO(Plain Old Java Objects,普通老式 Java 对象)为数据库中的记录. 一.mybatis环境配置 1.通过maven的pom.xml文件引入mybatis需要的包 在其<depend

  • spring security在分布式项目下的配置方法(案例详解)

    分布式项目和传统项目的区别就是,分布式项目有多个服务,每一个服务仅仅只实现一套系统中一个或几个功能,所有的服务组合在一起才能实现系统的完整功能.这会产生一个问题,多个服务之间session不能共享,你在其中一个服务中登录了,登录信息保存在这个服务的session中,别的服务不知道啊,所以你访问别的服务还得在重新登录一次,对用户十分不友好.为了解决这个问题,于是就产生了单点登录: **jwt单点登录:**就是用户在登录服务登录成功后,登录服务会产生向前端响应一个token(令牌),以后用户再访问系

  • springboot项目配置swagger2示例详解

    springboot项目配置swagger2示例详解

    swagger简介 Swagger是一款RESTful接口的文档在线自动生成.功能测试功能框架.一个规范和完整的框架,用于生成.描述.调用和可视化RESTful风格的Web服务,加上swagger-ui,可以有很好的呈现. 当我们在后台的接口修改了后,swagger可以实现自动的更新,而不需要人为的维护这个接口进行测试. 一.swagger2中常用的注解作用 注解 作用 @Api 修饰整个类,描述Controller的作用 ,表示标识这个类是swagger的资源 @ApiOperation 描述

  • Python Django的安装配置教程图文详解

    Django 教程 Python下有许多款不同的 Web 框架.Django是重量级选手中最有代表性的一位.许多成功的网站和APP都基于Django. Django是一个开放源代码的Web应用框架,由Python写成. Django遵守BSD版权,初次发布于2005年7月, 并于2008年9月发布了第一个正式版本1.0 . Django采用了MVC的软件设计模式,即模型M,视图V和控制器C. 学习Django前,我们要确定电脑上是否已经安装了Python,目前Python有两个版本,不过这两个版

  • win10 DVWA下载安装配置图文教程详解（新手学渗透）

    电脑重装系统了,需要重新装一下渗透测试的学习环境DVWA,借此机会就跟大家讲一下DVWA的安装过程,因为不同的电脑配置.环境不同,在我的电脑上按照我这个安装教程是一次性就安装好了的.如果安装的时候遇到了什么问题,欢迎大家在评论区讨论,我每天都会查看博客,看到了能解决我就会回复. 安装过程总共分两步,phpstudy的下载以及dvwa的下载.下面正式进入安装教程: 1.1首先需要准备的是DVWA的环境,DVWA需要运行在有数据库/服务器等多种环境下,我们一般选用集成了这些环境的phpStudy,

随机推荐