gulp是什么

gulp就是一个前端的自动化构建工具,在开发过程中很多重复的任务可以使用gulp和gulp插件自动完成。相比于grunt,gulp非常好上手,核心API只有4个,而且还有丰富的插件库。

gulp快速入门

  • 全局安装gulpnpm install -g gulp
  • 初始化项目,在项目目录下npm init -y
  • 作为项目的开发依赖(devDependencies)安装npm install --save-dev gulp
  • 在项目根目录下创建一个名为gulpfile.js的文件,并写入如下内容

  • 在当前目录的命令行中输入gulp

gulp的核心API

gulp的核心API有四个,task、dest、task和watch,详细的用法可以到官网文档查看http://www.gulpjs.com.cn/docs/api/

这里将用一个简单的例子来演示gulp的四个核心API如何使用

  • 安装gulp-less插件npm install --save-dev gulp-less
  • 在项目下新建./less/demo.less,并在其中写入

  • 接着在gulpfile.js中写入如下内容

  • 然后再当前项目的命令行中敲入gulp并回车执行
  • 接下来就可以看到当前项目目录下生成了css/demo.css,less文件被成功解析成css文件并放到的指定目录中
  • 再将demo.less中的内容,可以发现demo.css中的内容也发生了改变

gulp常用插件

然后生成响应的.map文件

接着在chrome浏览器中打开开发者工具(F12),然后点击开发者工具右上角的关闭按钮旁的工具条进入setting

然后勾选上Sources下的Enable CSS source maps和Auto-reload generated CSS,刷新浏览器后就可以在开发者工具中显示scss了(注意右下)

前端工程化 - gulp的更多相关文章

  1. [转]基于gulp和webpack的前端工程化

    本文样例代码 :https://github.com/demohi/learning-gulp 本文主要简单介绍一下基于gulp和webpack的前端工程化. 技术栈 React.js reFlux ...

  2. gulp前端工程化教程

    gulp npm install -g gulp-concat 文件打包 npm install -g gulp-rename 文件重命名 npm install -g gulp-imagemin 图 ...

  3. 基于webpack的前端工程化开发解决方案探索(一):动态生成HTML(转)

    1.什么是工程化开发 软件工程的工程化开发概念由来已久,但对于前端开发来说,我们没有像VS或者eclipse这样量身打造的IDE,因为在大多数人眼中,前端代码无需编译,因此只要一个浏览器来运行调试就行 ...

  4. vue组件续和前端工程化

    1.3 插槽 slot template: ` <button> <slot></slot> </button> ` <my-button> ...

  5. 10分钟学会前端工程化(webpack4.0)

    一.概要 1.1.前端工程化 随着前端的不断发展与壮大,前端变得越来越复杂,组件化.模块化.工程化.自动化成了前端发展中不可或缺的一部分,具体到前端工程化,面临的问题是如何提高编码->测试-&g ...

  6. 前端工程化与webpack

    (1) 前端工程化   近几年来,前端领域飞速发展,前端的工作早已不再是切几张图,写几个页面那么简单,项目比较大时,很可能会多人协同开发,模块化,组件化,CSS预编译等技术也被广泛的使用.前端自动化( ...

  7. web前端工程化/构建自动化

    前端工程化 前端工程化的概念在近些年来逐渐成为主流构建大型web应用不可或缺的一部分,在此我通过以下这三方面总结一下自己的理解. 为什么需要前端工程化. 前端工程化的演化. 怎么实现前端工程化. 为什 ...

  8. 前端工程化开发之yeoman、bower、grunt

    上两遍文章介绍了前端模块化开发(以seaJs为例)和前端自动化开发(以grunt为例)的流程,参见: http://www.cnblogs.com/luozhihao/p/4818782.html ( ...

  9. 前端工程化(二)---webpack配置

    导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord 继续上一遍的配置,本节主要记录 ...

随机推荐

  1. 使用object literal替换switch

    提问: 1.为什么要使用switch方法  ==> (替换冗长的if和else判断) 2.什么场景下使用 ==> (在判断布尔值的) 3.switch有什么优点 ==> (简化了代码 ...

  2. 关于Visual Studio 20**自动添加头部注释信息

    作为一个万年潜水党,不管这一篇文章技术含量如何,也算是一个好的开始吧.   在日常的开发中我们经常需要为类库添加注释和版权等信息,这样我们就需要每次去拷贝粘贴同样的文字,为了减少这种重复性的工作,我们 ...

  3. 日期提取函数EXTRACT

    EXTRACT extracts and returns the value of a specified datetime field from a datetime or interval exp ...

  4. 【转载】keil(MDK-ARM)的调试使用

    现在软件的模拟功能都是非常强大,但是有时候会用不好. 原文地址: 那就看这里吧:http://www.cnblogs.com/strongerHuang/p/5596355.html 1.编译+调试 ...

  5. 170511、Spring IOC和AOP 原理彻底搞懂

    Spring提供了很多轻量级应用开发实践的工具集合,这些工具集以接口.抽象类.或工具类的形式存在于Spring中.通过使用这些工具集,可以实现应用程序与各种开源技术及框架间的友好整合.比如有关jdbc ...

  6. [Haskell]解决hslua unknown symbol `___s trtod'的问题

    用cabal编译libpandoc时遇到这样的错误: HShslua-0.3.12.o: unknown symbol `___s trtod' ghc.exe: unable to load pac ...

  7. wireshark udp 序列号 User Datagram Protocol UDP

    序列号等差2^8固定首部20字节首部20+4字节数据部分1378字节片偏移0位Quick UDP Internet

  8. network command assistant

    这篇文章收集了久经考验靠谱的命令,也收集了几个比较新的命令.多数命令都可以在图形桌面执行,即使是没什么终端使用经验的Linux用户也会常常执行命令来使用ping或是其它的网络诊断工具. 1.curl ...

  9. 【开发者笔记】python

    题记: 最近做Python导入接口,用到xlrd包读取excel文件信息入库,获取合并单元格信息时遇到时而成功时而失败的情况,一开始用xls文件读取不了合并单元格信息,后来换用xlsx格式可以读取.但 ...

  10. 入坑-DM导论-第一章绪论笔记

    //本学习笔记只是记录,并未有深入思考. 1.什么是数据挖掘? 数据挖掘是数据库中发现必不可少的一部分. 数据预处理主要包括(可能是最耗时的步骤): 1.融合来自多个数据源的数据 2.清洗数据以消除噪 ...