更多gulp常用插件使用请访问:gulp常用插件汇总 rev-del这是一款从模块(如gulp-rev)生成的修订清单中删除旧的.未使用的指纹文件. 更多使用文档请点击访问rev-del工具官网. 安装 一键安装不多解释 npm install --save-dev rev-del 使用 revDel({ oldManifest: 'rev-manifest.json', newManifest: { /* 清单 */ }, suppress: true, deleteMapExtensions

Gulp,一个基于流的构建工具. 这是自己写的一个构建的demo,只是一个纯演示的示例,并没有完成什么项目工作.下面根据这个demo介绍一下Gulp. 上代码: gulpfile.js 'use strict'; /** * 环境 */ const env = process.argv.slice(6)[0] || 'development'; process.env.NODE_ENV = env; const isDev = env == 'development'; /** * 依赖 */

今天刚入职了一家新公司,结果明天就要开始项目了.上级说要用gulp来打包代码,所以今晚花了一晚来看这个gulp, 可以说已经入门了.所以做一个小小的总结 : 首先全局安装gulp npm install gulp -g   然后我在F:/盘新建一个gulpDemo路径, 进入到这里面,在本地再次安装一次gulp,我也不知道为什么本地还要安装.你就装吧,哈哈 不过,在安装之前,确保 gulpDemo 这个文件夹里有package.json 这个文件 这个文件如下: /package.json {

虽然网上有很多的 gulp 构建文章,但是很多都已经随着 gulp 插件的更新无法运行了.因此,我写了这个比较简单的构建方案. 如果还不熟悉 gulp 的插件,可以阅读上一篇文章:精通gulp常用插件 这个方案主要是为了实现js/css的压缩合并.自动添加版本号和压缩html. gulp-csso 压缩优化css gulp-uglify 压缩js gulp-html-minify 压缩html gulp-rev-all 生成版本号 主要通过上面插件实现功能,其他插件配合使用. // gulpfi

  最近公司要求把一套公众号项目的页面迁移到小程序,也就意味着要重新敲一份代码,不能更繁琐了,为了节省时间,提高迁移效率,就决定自己动手用gulp搭一个简易的小程序框架,再记录一下搭建过程.希望有大神可以给我提提意见,多多指点.   首先,公众号项目用的是vue框架,用的的技术栈包括vue-cli+webpack+axios+scss+es6+vuex+vux,为了配合之前的开发模式,用gulp做了以下配置: /* eslint-disable */const fs = require('fs'

gulp的关键在于流,这从它的logo就能看出来. 在node中,流是操作文件时一个重要的概念.流是指什么呢?它包含两个含义:“水流”和“流水”. 水流蕴含了源源不断或是一股一股那样流过的意味:而流水是“流水线”或是“流水作业”里那种让物件通过各个环节依次对其加工的意思. 我们经常接触到的“流媒体”主要是前者的含义,当你在线看一部电影时,影音数据从服务器源源不断地流入你的播放器, 再经过一些处理展现在你眼前:而gulp中的流我觉得含义偏重于后者,因为gulp的任务就是把源文件进行各种加工处理最终

Gulp,一个基于流的构建工具. 这是自己写的一个构建的demo,只是一个纯演示的示例,并没有完成什么项目工作.下面根据这个demo介绍一下Gulp. 上代码: gulpfile.js 'use strict'; /** * 环境 */ const env = process.argv.slice(6)[0] || 'development'; process.env.NODE_ENV = env; const isDev = env == 'development'; /** * 依赖 */

前端自动化打包发布已是一种常态,尤其在移动端,测试过程中静态资源的缓存是件很头疼的事情,有时候明明处理的bug测试还是存在,其实就是缓存惹的祸,手机不比pc浏览器,清理缓存还是有点麻烦的.所以自动化实现静态资源的版本更新才是正道. 实际开发过程中,我们常用到的功能包括: 1.目标路径的清除: 2.静态资源复制到目标路径: 3.css文件的合并与压缩: 4.js文件的合并与压缩: 5.根据文件的变化添加版本号: 第1.2.3.4几个功能倒是很好解决,今天主要说说gulp实现静态资源自动添加版本号:

gulp例子:https://github.com/Aquarius1993/gulpDemo 淘宝镜像:$ npm install -g cnpm --registry=https://registry.npm.taobao.org   一 入门:          npm: node package manager(前提是安装了node)           1.1 全局安装   npm install --global gulp           1.2 作为项目依赖安装  npm in

package.json { "name": "gulp", "version": "0.0.1", "description": "Pages for Staging Financial App", "devDependencies": { "browser-sync": "*", "del": "

Yeoman包括了三个部分yo(脚手架工具).grunt/gulp(构建工具).bower(包管理器).听说gulp更容易上手,所以我就没用grunt而选的gulp 什么是开发流程? 在我看来一个完整的开发流程应该包括: 本地开发环境的初始化 第三方依赖的管理 源文件编译 自动化测试 发布到pipeline和各个环境 而现代的开发流程,就是要使上面的各个部分都可以自动化,一个命令就可以使这些流程都自动走完,并且快速的得到错误或通过的反馈,让我们可以方便快速的修复错误和release. 工具简单介

示例项目介绍 文中使用的例子是一个基于 Angular.js 实现的网页版 Todo App,在 Github 中下载angular-quickstart.项目代码结构如下 清单 5. 项目目录结构 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |--bower_components |--build |--node_modules |--static_pages |--js    |--controllers    |--services    |--app.j

首先下载npm模块 npm install --save-dev gulp gulp-sftp webpack del gulp-sftp 上传服务器主要依赖 gulp.webpack必备 del 是一个清空文件目录的依赖包 gulpfile.js const gulp = require('gulp'); const webpack = require('webpack') const path = require('path'); const del = require('del'); co

更多gulp常用插件使用请访问:gulp常用插件汇总 del这是一款删除文件的工具. 更多使用文档请点击访问del工具官网. 安装 npm install del API del(patterns, options) 返回Promise<string[]>带有删除路径的路径. del.sync(patterns, options) 返回string[]带有删除路径的路径. 参数解析 patterns 类型: string | string[] options 类型: object 您可以指定任

因为之前一直有人给我推荐gulp,说他这里好哪里好的.实际上对我来说够用就行.grunt熟悉以后实际上他的配置也不难,说到效率的话确实是个问题,尤其项目大了以后,目前位置遇到的项目都还可以忍受.不过不管怎么说,需要亲自用过gulp之后才能品评他和grunt之间的优劣.不废话,直接上实例. 本人自建了一个前端目录结构,后续的例子都是以这个目录结构为准.dest是我们打包压缩结果保存目录,现在是空的.以后每完成一个实例,我们就会清空一下dest目录,保证下一个实例的结果和实例代码对应. 1. 第一个

推荐使用gulp-rev + gulp-rev-collector是比较方便的方法,结果如下: "/css/style.css" => "/dist/css/style-1d87bebe.css" "/js/script1.js" => "/dist/script1-61e0be79.js" "cdn/image.gif" => "//cdn8.example.dot/img/i

写这篇文章的目的是为了以后的项目中懒得再去配gulp,直接可以拿这篇博客中的来用,因为有时候配置还是挺烦人的. gulp相关插件的介绍 用法比较简单,假设大家都会用gulp,下面主要介绍一下一些插件的用途 1.del 删除文件,用于清空文件 2.browser-sync 用于自动刷新浏览器,从此再也不用F5手动刷新了 3.gulp-htmlmin 用于压缩html 4.gulp-clean-css 压缩css 5.gulp-uglify 压缩js 6.gulp-replace 替换路径 7.gu

gulp基于node 1.全局安装gulp: $ npm install --global gulp 2.前往项目目录,然后安装作为项目的开发依赖(devDependencies): $ npm install --save-dev gulp 3. 在项目根目录下创建一个名为 gulpfile.js 的文件: var gulp = require('gulp'); gulp.task('default', function() { // 将你的默认的任务代码放在这 console.log("he

一.构建gulp环境 1.下载nodejs gulp基于node.js,要通过nodejs的npm安装gulp,所以要先安装node.js环境.(英文官网/中文官网链接). 通过cmd命令窗口确定安装node.js.(在命令窗口输入node -v或npm -v 查看是否返回出版本号). 2.全局安装gulp 确定正确安装了nodejs环境,然后通过命令全局方式安装gulp: npm install gulp -g 或者 cnpm install gulp -g 二.项目流程 1.生成项目所需信息

gulp是基于流的前端构件化工具.目前比较火的前端构建化工具还是挺多的,grunt gulp fis3等等. 这个鬼东西有什么用?请参考https://www.zhihu.com/question/35595198 为什么选择gulp,因为使用非常简单,学习成本低.以后想用别的工具再转去学也不难. 一个自动化构建工具都没用过的前端,何以谈人生? 以下是正题: 1.要玩gulp,首先得安装node,因为npm跟随node的包安装管理工具.具体下载直接百度nodejs中文网,根据自身的环境(wind

这篇文章不会介绍 gulp 的起源.发展:不会去一个个讲解 gulp API:也不想出现大段大段的 gulpfile.js 代码:更木有帮你分析 gulp 实现原理,只有一些我自己对 gulp 的使用理解和总结. 如何通过 gulp 让偶们的前端项目高大上的跑起来?gulp 能做什么,还能做什么?gulp套路能不能来几套?... 希望通过这篇文章你会找到答案 写作风格的原因,劳资写的文章都较详(啰)细(嗦),请轻拍:) 当然,同样期待能得到伙伴们的讨论和支持. 目录 简单介绍 必备插件 常用插件