gulp | 易学教程

用gulp来实现web服务器

阅读更多关于用gulp来实现web服务器

某厂面试归来，发现自己落伍了！>>> 用gulp来实现web服务器点这里查看原文 gulp现在是越来越流行了。它可以做的事情实在是太多了，比如，拼接js文件，压缩图片。在这个教程里，你会了解怎么使用gulp.js来实现一个应用了内置的livereload功能的本地web服务。以前的实现方式假设我们要开发一个单页应用。这个app的入口是index.html。我们的目标是可以让浏览器通过localhost来访问这个页面。以前，你需要安装一个Apache或者Nginx这样的服务器软件来实现这样的功能。更棒的实现方式时至今日，javascript无所不能了，就要称霸天下了，甚至它都可以去实现一个web服务。这篇文章里，我们就要用一个gulp的插件，人称gulp-connect。用这个插件来实现一个WEB服务。接下来的篇幅，我们就要来为我们的单页应用来配置一个本地服务。开始下文之前，我假定你已经把准备工作都已经做好了，比如gulpfile文件已建好！第一步，安装第一步，我们要来安装下gulp-connect插件安装的命令如下： npm install --save-dev gulp-connect 小提示：npm install --save-dev 可以简写为npm i -D 现在，我们来定义web服务，gulpfile.js的代码如下 var gulp =

[译]幕后的gulp：构建一个基于流的任务自动化工具

阅读更多关于 [译]幕后的gulp：构建一个基于流的任务自动化工具

某厂面试归来，发现自己落伍了！>>> 幕后的gulp：构建一个基于流的任务自动化工具 /** * 谨献给Yoyo * * 原文出处：https://www.toptal.com/nodejs/gulp-under-the-hood * @author dogstar.huang <chanzonghuang@gmail.com> 2016-05-14 */ 前端开发人员现在正在使用多种工具把日常操作自动化。三个最流行的解决方案是Grunt，Gulp和Webpack。每个工具都建立在不同的理念，但是它们共享同一个目标：精简前端构建过程。例如，Grunt是配置驱动的，而Gulp几乎不需要配置即可执行。事实上，Gulp依赖于开发人员编写代码来实现构建流程 - 各种构建任务。当谈到选择这些工具之一时，我个人最喜欢的是Gulp。总而言之，这是一个简单，快速和可靠的解决方案。在这篇文章中，我们将看到幕后的Gulp是如何工作，通过花点心思在实现我们自己的像Gulp这样的工具。 Gulp API 接口 Gulp自带的只有四个简单的功能： gulp.task gulp.src gulp.dest gulp.watch 这四个简单的功能，通过各种组合提供了Glup全部的强悍和灵活性。在4.0版本中，Gulp引入了两个新的功能：gulp.series和gulp.parallel

gulp进阶－自定义gulp插件

阅读更多关于 gulp进阶－自定义gulp插件

某厂面试归来，发现自己落伍了！>>> gulp已经成为很多项目的标配了，gulp的插件生态也十分繁荣，截至2015.1.5，npm上已经有10190款gulp插件供我们使用。我们完全可以傻瓜式地搭起一套构建。然而，我们经常会遇到一种情况，我们好不容易按照文档传入对应的参数调用了插件，却发现结果不如预期，这时候我们就要一点点去排错，这就要求我们对gulp插件的工作原理有一定的了解。本文以实现一个gulp插件为例，讲解一下gulp插件是如何工作的。需求描述通常，我们的构建资源为js／css／html以及其它的一些资源文件，在开发或发布阶段，js／css会经过合并,压缩,重命名等处理步骤。有些场景下，我们不能确定经过构建后生成js／css的名称或者数量，如此就不能在HTML文件中写死资源的引用地址，那么该如何实现一个Gulp的插件用以将最终生成的资源文件／地址注入到HTML中呢？假设我们需要实现的插件是这样使用方式： <html> <head>  </head> <body>  </body> </html> 我们通过一个HTML注释用以声明需要依赖的资源，InlineResource 是匹配的关键词，":"做为分割，/*.css$/，/*.js$/

gulp中如何保证任务执行顺序。

阅读更多关于 gulp中如何保证任务执行顺序。

某厂面试归来，发现自己落伍了！>>> 举一个简单了例子： gulp.task('task2',function(){ setTimeout(function(){ console.log("task2 has been completed") },3000) }) gulp.task('task1',['task2'],function(){ console.log("task1 has been completed") }) 在命令行中执行gulp task1 通过命令行的任务流程，我们可以看出，任务并没有像我们想象的那样运行。这是因为在gulp中，所有task都是异步执行的，那么此时我们需要引入q模块来帮助我们解决这个问题。通过命令行输入gulp install q --save-dev来安装q模块 var Q = require('q'); var Q = require('q'); gulp.task('task2',function(){ var deferred = Q.defer(); setTimeout(function(){ console.log("task2 has been completed") deferred.resolve(); },3000) return deferred.promise; }) gulp.task('task1',[

【天赢金创】探究Gulp的Stream

阅读更多关于【天赢金创】探究Gulp的Stream

某厂面试归来，发现自己落伍了！>>> 来自Gulp的难题描述Gulp的项目构建过程的代码，并不总是简单易懂的。比如Gulp的这份recipe ： var browserify = require ( 'browserify' ); var gulp = require ( 'gulp' ); var source = require ( 'vinyl-source-stream' ); var buffer = require ( 'vinyl-buffer' ); var uglify = require ( 'gulp-uglify' ); var sourcemaps = require ( 'gulp-sourcemaps' ); var gutil = require ( 'gulp-util' ); gulp.task( 'javascript' , function () { var b = browserify({ entries: './entry.js' , debug: true }); return b.bundle() .pipe(source( 'app.js' )) .pipe(buffer()) .pipe(sourcemaps.init({loadMaps: true })) .pipe(uglify()) .on( 'error' ,

如何使用Gulp执行任务？

阅读更多关于如何使用Gulp执行任务？

文章目录 1.Gulp 使用 2.Gulp 中提供的方法 3.Gulp 执行任务的简单示例（文件复制） 1.Gulp 使用使用npm install gulp 下载gulp库文件在项目根目录下建立 gulpfile.js 文件重构项目的文件夹结构—— src 目录存放源代码文件、 dist 目录存放处理后的文件在 gulpfile.js 文件中编写任务在命令行工具中执行gulp任务 2.Gulp 中提供的方法 gulp.src（）：获取任务要处理的文件 gulp.dest（）：输出文件 gulp.task（）：建立gulp任务 gulp.watch（）：监控文件的变化` 3.Gulp 执行任务的简单示例（文件复制） //gulpfile.js文件 //引用gulp模块 const gulp = require ( 'gulp' ) ; /* *gulp.task(参数1，参数2) *参数1：任务的名称 *参数2：任务的回调函数 */ gulp . task ( 'first' , ( ) => { console . log ( '任务开始执行' ) ; //1.使用gulp.src获取要处理的文件 gulp . src ( 'src/tab.css' ) . pipe ( gulp . dest ( 'dist/css' ) ) ; } ) ;

gulp相关

阅读更多关于 gulp相关

一、简介 gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器； gulp是基于Nodejs的自动任务运行器，她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。二、安装　　通过 npm 来安装 gulp；(设置镜像源可以通过cnpm安装) 全局安装　　在cmd中执行 cnpm i -g gulp 查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装三、配置信息　　1. npm init -y 生成package.json 文件会自动存储下载的第三方依赖包信息，存储信息如下： { "name": "zhang", "version": "1.0.0", "description": "", "main": "gulpfile.js", "devDependencies": { "@babel/core": "^7.8.7", "@babel/preset-env": "^7.8.7", "del": "^5.1.0", "gulp": "^4.0.2",

gulp处理文件

阅读更多关于 gulp处理文件

通常，我们使用gulp提供的src()和dest()方法处理文件如： const { src, dest } = require('gulp'); exports.default = function() { return src('src/*.js') .pipe(dest('output/')); } 在项目中，我们经常使用babel格式化下我们的代码，在写入输出的相关目录。 const { src, dest } = require('gulp'); const babel = require('gulp-babel'); exports.default = function() { return src('src/*.js') .pipe(babel()) .pipe(dest('output/')); } 如执行前gulpfile.js文件内容如下： const { src, dest } = require('gulp'); const babel = require('gulp-babel'); function test(){console.log("hello world")} var name = "huangbaokang"; var age=30; obj ={"author":"huangbaokang",age:30} exports.default

利用Gulp搭建本地服务器并实现Ajax模拟

阅读更多关于利用Gulp搭建本地服务器并实现Ajax模拟

利用gulp搭建本地服务器，实现自动打开页面，自动刷新，模拟ajax操作用到的模块如下： gulp gulp-webserver gulp-livereload 第一步，创建package.json npm init 第二步，安装模块 npm install gulp --save-dev npm install gulp-webserver --save-dev npm install gulp-livereload --save-dev 第三步，创建gulpfile.js文件 var url = require('url'); var fs = require('fs'); var path = require('path'); gulp = require('gulp'); livereload = require('gulp-livereload'); webserver = require('gulp-webserver'); //web服务器 gulp.task('webserver', function() { gulp.src('./www') // 服务器目录（./代表根目录） .pipe(webserver({ // 运行gulp-webserver port: 8000, //端口，默认8000 livereload: true, //

了解gulp

阅读更多关于了解gulp

简单了解gulp 在日常开发中，我们往往会用到很多前端的构造工具，我们常见的有Node,NPM,Grunt,Gulp…，很多很多，上一篇博客中已经简单的介绍了npm，这里再简单讲解一下gulp。什么是gulp gulp是一个前端自动化打包构建工具，主要用来帮我们把代码进行压缩、转码，gulp运行必须依赖 node 环境。 gulp 安装因为gulp是一个全局工具，所以直接使用npm安装gulp工具就ok了。当然也可以安装项目里的gulp，看个人需求。全局安装gulp： npm i -g gulp 项目安装gulp ： npm i gulp gulp 检测检测gulp： gulp --version 或者 gulp -v ，版本号为CLI version: 2.2.0就是对的。 gulp 卸载输入指令 npm uninstall --global gulp 或 npm un -g gulp 即可完成卸载 gulp 的方法 1. src ( ) => 用来找到你要打包的文件的 => src ( '你要打包的文件的地址' ) => 返回值就是一个二进制流 , 就可以继续去调用别的方法 2. pipe ( ) => 用来帮你做事情的 => pipe ( 你要做的事情 ) => 返回值 : 又是一个二进制流 , 可以继续使用方法 3. dest ( ) => 用来写入文件的 =>

订阅 gulp