gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快。如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧。
前端开发的工作往往需要把LESS/SASS编译成CSS文件,对多个JS、CSS文件进行合并与压缩处理,对JS、CSS进行语法的检查等,上面提到的这些都是一些重复性的操作,在开发过程中占据了大量的时间,降低了开发效率。对于大量重复性的操作是不是可以交给工具来处理,我们只需要告诉工具需要处理哪些操作。那么今天要给大家介绍的工具是Gulp。 本文内容概要: 1 什么是Gulp 2 Gulp VS Grunt 3 Gulp的安装与使用 4 命令行的简单介绍 1 什么是Gulp Gulp是一个前端自动化构建工具,在项
C:\Users\Administrator\AppData\Roaming\nvm
安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 1、去nodejs官网安装nodejs 2、打开命令行,OSX是终端,windows是命令提示符(window + r 输入cmd回车) 3、使用npm(nodejs的包管理器),或选装cnpm执行npm install cnpm -g --registry=https://registry.npm.taobao.org 4、全局安装gulp:(c)npm install gu
gulp是基于流的前端构件化工具。gulp是自动化项目的构建利器;不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成。同时使用非常简单,学习成本低。这个压缩工具也是前端必学的的工具。
在该项目路径下,我们独立安装gulp:npm install gulp 。此时会生成一个 node_modules 文件夹和一个 package-lock.json 文件,如下图:
博客搭建这么久了发现并没有进行过优化,首页虽然打开速度勉强能够接受,但是 github 和 coding 提供的空间有限,是时候优化一下了。基本思路是采用 gulp 进行代码的压缩等。
这个方案主要是为了实现js/css/image的压缩合并、自动添加版本号、自动加浏览器前缀和压缩html。
三、项目环境搭建 3.1.创建项目环境和安装包 创建django项目 mkvirtualenv DjangoProject workon DjangoProject pip install -i https://pypi.douban.com/simple django==2.0.2 进front目录 npm init #初始化一个package.json配置文件文件 在package.json文件中添加要安装的包 "devDependencies": { "browser-sync":
/** * 1. LESS编译 压缩 合并 * 2. JS合并 压缩 混淆 * 3. img复制 * 4. html压缩 */
安装完gulp环境,并且配置好gulpfile.js,执行静态文件压缩和代码混淆时,出现如下错误: Error: Cannot find module 'gulp-clone' Error: Cann
打开命令行, 输入指令=> $ sudo npm install --global
在前端开发中通常需要做,预处理语言的编译、js文件的压缩、css文件的压缩、图片的压缩等一系列工作,而使用Gulp可以自动化的完成这些工作,从而提高网站的开发效率,在我的博客使用Less中介绍了将Less文件编译成CSS文件的方法,仔细观察可以看到如果按照博客中介绍的方法,在编译多个Less文件或者编译不同文件夹下的Less文件时需要执行多次Less文件编译命令,而使用Gulp可以一次性完成这些操作
前段时间折腾Gulp,主要是搜寻一些插件,组合之以优化前端开发流程。这段折腾历程除了达成所愿外,给予最大的收获是:只要你想实现某功能,基本就已有对应插件供使用;所需要做的只是去发现她,外加”临幸”她而
第一次接触gulp,当参考各方资料翻译下来,感觉还不如自己总结一份来的流畅,所以这篇最后将自己的实践放在开始,将之前的原文与译文放在最后以供参考。
gulp能够帮助用户自动压缩静态资源,配合各类下属插件,能够压缩包括css、js、html乃至各类格式的图片文件。
如果希望对在静态页面中引入的相关资源进行压缩(比如:CSS,JavaScript,图片等),可以使用Gulp实现。 当然,还可以其他其他打包工具,比如:Grunt,Webpack等等。
简单介绍 gulp是基于node开发的所以可以使用npm这个nodejs的包管理工具安装gulp,使用npm首先得配置node环境
本文介绍用 Gulp 和 Babel 6 来将 ES6 代码转换成 ES5 代码。
本文作者:IMWeb 林鑫 原文出处:IMWeb社区 未经同意,禁止转载 本文主要展示的是gulp常用插件的使用方法和用途,通过对插件的熟练运用达到精通gulp。不定期更新。可以到gith
升级到 VS2015 之后, TypeScript 文件不能自动编译成 js 文件, 要编译项目才能讲所有的 ts 文件 编译成 js 文件, 不过 VS2015 支持 Gulp , 而 Gulp 有 TypeScript 插件, 这样使用 Gulp 自动编译 ts 文件的方法就可以实现了。
var s = gulp.src(["fileA","fileB","fileC"])
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/j_bleach/article/details/53047467
Gulp学习笔记 Write By CS逍遥剑仙 我的主页: www.csxiaoyao.com GitHub: github.com/csxiaoyaojianxian Email: sunjianfeng@csxiaoyao.com QQ: 1724338257 目录导航 Gulp学习笔记 1. 安装 Gulp.js 2. 配置 2.1 创建 package.json 文件 2.2 安装依赖项 2.3 安装需要的插件 2.4 创建配置文件 3
自从jsd官方的ICP被吊销以后,国内的大部分网站速度越来越慢,本文提供一个简单的可行性办法 使用前您最好先了解gulp使用 gulp 压缩博客静态资源 | Akilar の糖果屋 您可以参考闰土的欲善其事,必利其器 - 论如何善用ServiceWorker || 陈YFの博客( ̄▽ ̄)” (cyfan.top) 也可用我的一键替换 安装gulp及gulp-replace hexo根目录运行 npm install gulp-cli -g npm install gulp -D npm install --
Gulp是一个在你开发web时,帮助你完成几个任务的工具。它经常用来进行一些前端任务,比如:
关于 Gulp 就不过多啰嗦了。常用的 js 模块打包工具主要有 webpack、rollup 和 browserify 三个,Gulp 构建 ES6 开发环境通常需要借助这三者之一来合并打包 ES6 模块代码。因此,Gulp 构建 ES6 开发环境的方案有很多,例如:webpack-stream、rollup-stream 、browserify等,本文讲述使用 gulp-better-rollup 的构建过程。gulp-better-rollup 可以将 rollup 更深入地集成到Gulps管道链中。 GitHub地址:https://github.com/JofunLiang/gulp-translation-es6-demo
描述:给静态资源文件名添加hash值:unicorn.css => unicorn-d41d8cd98f.css
本文需要安装node(自行安装),并了解过gulp入门。gulp脚本下载:https://github.com/youhunwl/gulp 欢迎star。
前言: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。相比于grunt的频繁 IO 操作,gulp的流操作,能更快地更便捷地完成构建工作。此处仅记录初步折腾中所遇点滴以及待解决的点。 Gulp折腾之初探 折腾之战略上的藐视 回过头看Gulp的折腾历程,使用还是非常简易的。初步入门资料可参考这里。所以战略上一定要藐视”她”;当然战术上要
gulp能够帮助用户自动压缩静态资源,配合各类下属插件,能够压缩包括css、js、html乃至各类格式的图片文件。(图片文件的压缩往往只能节省几十KB,效果远远不如imagine、tinypng等压缩方式,所以此处不再写使用gulp压缩图片的内容)。
对网站资源进行优化,并使用不同浏览器测试并不是网站设计过程中最有意思的部分,但是这个过程中的很多重复的任务能够使用正确的工具自动完成,从而使效率大大提高,这是让很多开发者觉得有趣的地方。
写好的、具有特定功能的、我们能直接使用的模块即第三方模块,由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中,所以又名包。
gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。
Tips:前导必备 博主博客地址 博主使用的是yilia主题 ---- 1、全局安装gulp npm install gulp -g # 查看版本 gulp -v 2、安装gulp插件 在站点根目录下安装 npm install gulp --save npm install gulp-minify-css --save npm install gulp-uglify --save npm install gulp-htmlmin --save npm install gulp-htmlclean -
gulp 是一个构建工具,基于Node.js的平台运行,使用的是commonJs的模块化语法。 我们使用gulp需要用到的包 一个TASK任务,对应一个包,对应一个处理逻辑、 gulp.series对应的是同步任务,从左到右,依次执行任务。时间长 gulp.parallel对应的是异步任务,效率高,时间短。 gulp.src 表明文件从哪里读取 gulp.dest 表明文件输出到哪 const gulp = require('gulp'); //gulp的包 const eslint = req
在项目路径下使用 npm init初始化之后,将下面需要安装的依赖复制到package.json文件中
上述代码会将src/test里面的所有js文件合并,压缩成一个文件并保存到./bunld/js/bundle.min.js 运行命令
由于本文重点是介绍gulp4.0搭建脚手架的思路,相关插件的用法以及项目结构的设计,由于gulp的基本用法很简单,如果不熟悉可以移步官网自行研究学习。该脚手架的设计思路和功能如下:
大约是上一年的这个时候,因为项目合并来到了新的项目组中。虽然协作的同岗位同事也是同一个组的,但使用的Gulp 工作流却有些不一样。第一天做项目需求的时候,就遇到了一件让我瞠目结舌的事情:这里的Sass 编译一次居然要10s 以上。 有用过Sass 这类CSS 预处理器都知道10s+ 意味着什么,你每保存一次.scss 文件,都必须等上10s 以上才能看到你所改动的效果。如此一来十分尴尬,因为你直接写原生的CSS 语法比这还快。让我更加惊讶的是当时的项目组相关同事已经用了这套工作流快一年了,却居然能一直默默忍
众所周知,微信小程序在发布的时候,对提交的代码有1M大小的限制!所以,如果你正在写一个功能稍微复杂一点的小程序,就必须得时刻小心注意你的代码是不是快触及这个底线了。
gulp 是一个前端构建工具,它能通过自动执行常见任务,比如编译预处理 CSS ,压缩 JavaScript 和刷新浏览器,来改进网站开发的过程,从而使开发更加快速高效。
前言 gulp 是一个前端项目开发的自动化打包构建工具, 类似的打包工具还有webpack。 前端开发的过程中,会写到 js 文件,css 文件,我们的项目如果想上线,那么一定要体积小一点,就需要对原始的代码进行编译压缩。 环境准备 gulp 是基于node 运行的,使用npm 全局安装 npm install -g gulp 安装gulp依赖包,因为在上线后是不需要这个包的,所以将这个项目安装在开发依赖: npm install gulp --save-dev 安装完成会生成一个package-lock.
但是升级后的 gulp 语法有改动,所以需要修改 gulpfile.js文件,否则会报
第一: gulp必须在nodejs环境下运行,所以要先搭建nodejs环境。 测试nodejs是否安装正常。命令:node -v 如果返回版本号说明安装正常
而gulp呢,是基于stream流的形式,也就是前一个函数(工厂)制造出结果,提供后者使用。
在软件开发中使用自动化构建工具的好处是显而易见的。通过工具自动化运行大量单调乏味、重复性的任务,比如图像压缩、文件合并、代码压缩、单元测试等等,可以为开发者节约大量的时间,使我们能够专注于真正重要的、有意义的工作,比如设计业务逻辑,编写代码等等。 对很多前端开发人员而言,Grunt 无疑是这方面的首选。基本上,如果你会用 JavaScript ,那么在一个名为 Gruntfile.js (或者 Gruntfile)的文件中用 Javascript 语言定义自动化任务是非常简单的过程,同时大量的 第三方插件
领取专属 10元无门槛券
手把手带您无忧上云