Gulp介绍

gulp是基于Node.js的自动任务运行器,能自动化地完成 JavaScript/sass/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,同时可以对文件进行监听,如果文件有改动,可以自动处理生成新的文件。

gulp 和 grunt 非常类似,grunt 会频繁进行 IO 操作,而 gulp 则不需要,可以更高效的完成操作。

Gulp官网地址: https://gulpjs.com/

安装起来非常简单,首先确保安装成功了 node.js, 然后:

npm install gulp-cli -g
npm install gulp -D
touch gulpfile.js

gulpfile是核心文件,需要进行配置,下面是 gulpfile.js 的示例内容:

 1 var gulp = require(‘gulp‘);
 2 var pug = require(‘gulp-pug‘);
 3 var less = require(‘gulp-less‘);
 4 var minifyCSS = require(‘gulp-csso‘);
 5
 6 gulp.task(‘html‘, function(){
 7   return gulp.src(‘client/templates/*.pug‘)
 8     .pipe(pug())
 9     .pipe(gulp.dest(‘build/html‘))
10 });
11
12 gulp.task(‘css‘, function(){
13   return gulp.src(‘client/templates/*.less‘)
14     .pipe(less())
15     .pipe(minifyCSS())
16     .pipe(gulp.dest(‘build/css‘))
17 });
18
19 gulp.task(‘default‘, [ ‘html‘, ‘css‘ ]);

gulp 本身有众多实用的插件,比如想编译sass  到 css 就需要 gulp-ruby-sass 插件。

时间: 2024-10-02 07:16:51

Gulp介绍的相关文章

187.gulp介绍和安装

安装gulp 使用gulp自动化开发流程,配置好gulp后,可以自动给我们处理好一些工作,比如写完css后,要压缩成.min.css,写完js后,要进行相关的图片压缩等,这些工作都可以让gulp帮我们完成. 1.创建本地包管理环境 使用npm init 可以在本地生成一个package.json文件,package.json文件用来记录当前这个项目依赖了哪些包,以后别人拿到项目之后,不需要将node_modules文件进行拿到(因为node_modules文件都是相关的安装包,比较大),只需要进

gulp plugins 插件介绍

原文:http://ju.outofmemory.cn/entry/103253 鸟窝 2014-11-28 3020 阅读 gulp Gulp是一个构建工具, 功能类似grunt, 以及Java生态圈的ant, maven, gradle等. 其它的javascript生态圈的构建工具可以参考: List of JavaScript Build Tools它采用了一种流式处理的方式, 编写起来简单直观. 相对于其它javascript构建工具, 母亲啊它的star数是仅次于grunt,流行度还

Gulp简单介绍

Gulp 介绍 自动化构建工具,可以通过gulp对我们的代码进行全自动的编译.可以实现代码的自动压缩.编译.实时监测等功能. 特点 任务化 基于流(数据流io:input/output)操作 整个操作都是基于数据流进行操作 具备属于gulp的内存,所有的操作全部在gulp的内存当中 对应着输入流和输出流.会将数据通过src方法输入,通过dest方法输出. 简易的API 官网网站:https://gulpjs.com/ 中文网:https://www.gulpjs.com.cn/ 插件中心:htt

[web建站] 极客WEB大前端专家级开发工程师培训视频教程

极客WEB大前端专家级开发工程师培训视频教程  教程下载地址: http://www.fu83.cn/thread-355-1-1.html 课程目录:1.走进前端工程师的世界HTML51.HTML5与HTML4的区别2.HTML5新增的主体结构元素3.HTML5新增的的非主体结构元素 4.HTML5表单新增元素与属性5.HTML5表单新增元素与属性(续)6.HTML5改良的input元素的种类 7.HTML5增强的页面元素8.HTML5编辑API之Range对象(一)9.HTML5编辑API之

如何在网页中解决设计师留给你的字体问题?

文章来源:http://www.zretc.com/technologyDetail/429.html 在一些推广活动项目的页面中,设计师可能会需要用到许多好看的字体,例如:方正综艺.ttf.方正兰亭. 方正喵呜.ttf等(此处省略N个字体). 当设计师使用这些特殊字体的时候,前端攻城狮同学们往往因为这些字体"太有个性"而烦恼.今天小卓为大家分享一些经验,实用又经典,希望能对童鞋们的工作有所帮助! 方法一:切图法 方法二:Font-spider介绍及使用 Font-spider自动化构

Git \Github使用文档(二)

1.1. 重点 生成ssh秘钥,配置自己的git信息 使用git拉取上传仓库代码等并能解决冲突 使用gulp对html/css/js的执行自动化配置 1.2. 学习大纲 1.2.1. 通过ssh方式上传代码 (重要) Git是分布式的代码管理工具,远程的代码管理是基于SSH的,所以要使用远程的git则需要SSH的配置 公钥和私钥一一对 好比钥匙和锁,公钥给git仓库管理员,私钥放本地 生成SSH密钥过程: 查看是否已经有了ssh密钥:cd ~/.ssh如果没有密钥则不会有此文件夹,有则备份删除

极客学院Web前端开发技术实战视频教程 初级入门+高级实战++专家课程+面试指导

===============课程目录=============== ├<初级中级>│  ├<1. HTML5开发前准备>│  │  ├1.HTML5开发前准备.mp4│  │  └2.开发前的准备-快捷键.mp4│  ├<10. React.js>│  │  ├React.js简介.txt│  │  ├<1.React 概述>│  │  │  ├React 开发环境搭建.mp4│  │  │  ├编写第一个 React 程序.mp4│  │  │  └什么

Django2.1视频教程

课程名称:超细讲解Django打造大型企业官网课程类型:Python3.7, Django2.1课程数量:334集课程代码:有总共大小:44.5 GB共享连接:链接:https://pan.baidu.com/s/1WMqpupMC75NGi6pFV3x0xA 提取码:1rv6课程目录:001.[虚拟环境]为什么需要虚拟环境.mp4 002.[虚拟环境]virtualenv创建虚拟环境.mp4 003.[虚拟环境]virtualenvwrapper使用.mp4 004.[Django预热]URL

Node.js基础:第二篇

目录 第一章:Node.js模块化开发 1.1-JavaScript开发弊端 1.2-模块化开发的好处 1.3-Node.js中模块化开发规范 1.4-模块内成员的导入和导出 1.5-导出的第二种方式 第二章:系统模块 2.1-什么是系统模块 2.2-系统模块fs文件操作 2.3-相对路径和绝对路径 2.4-系统模块path 路径操作 第三章:第三方模块 3.1-什么是第三方模块 3.2-获取第三方模块 3.3-第三方模块 nodemon 3.4-第三方模块 nrm 3.5-第三方模块 Gulp