前言: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。相比于grunt的频繁 IO 操作,gulp的流操作,能更快地更便捷地完成构建工作。此处仅记录初步折腾中所遇点滴以及待解决的点。 Gulp折腾之初探 折腾之战略上的藐视 回过头看Gulp的折腾历程,使用还是非常简易的。初步入门资料可参考这里。所以战略上一定要藐视”她”;当然战术上要
在一个比较大的项目里面(有国际化需求的),国际化的支持是一个必不可少的; 那如何落地就得具体问题具体分析了,这里说说我遇到过并落地的一个改造方案;
由于本文重点是介绍gulp4.0搭建脚手架的思路,相关插件的用法以及项目结构的设计,由于gulp的基本用法很简单,如果不熟悉可以移步官网自行研究学习。该脚手架的设计思路和功能如下:
安装完gulp环境,并且配置好gulpfile.js,执行静态文件压缩和代码混淆时,出现如下错误: Error: Cannot find module 'gulp-clone' Error: Cann
gulp官方文档:https://www.gulpjs.com.cn/docs/getting-started/quick-start/
node有npm,npm能运行脚本。在package.json文件中,scripts 属性可以指定npm 的命令:
图片 本篇博文的内容根据 Introduction to Gulp.js 系列文章 拓展而来,其代码、依赖包及目录结构部分均有所更改,更多详细内容,敬请参考
在前面两节提到的任务再 gulp 执行得到了相应的产物,但是当文件修改过后我们依然需要再次执行命令来进行构建,但是在开发过程中,gulp 同样支持我们通过 watch 来对文件进行监控,每当监控到文件变动就触发所关联的构建任务。这样的特性在编程开发中也是最为基础的功能支撑。
对网站资源进行优化,并使用不同浏览器测试并不是网站设计过程中最有意思的部分,但是这个过程中的很多重复的任务能够使用正确的工具自动完成,从而使效率大大提高,这是让很多开发者觉得有趣的地方。
三、项目环境搭建 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":
突然发现在我博客文章中,缺少这一块的记录,那我就补一篇吧。 gulp的环境配置和安装:http://www.cnblogs.com/padding1015/p/7162024.html 这里就补充一篇gulpfile.js的配置,用于自动化编译sass和pug文件用: 1 var gulp = require('gulp'); 2 var pug = require('gulp-pug'); 3 var sass = require('gulp-sass'); 4 var rename = requ
关于 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
在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始逐渐渗透到“大前端”的开发中。前端开发过程越来越繁琐,当今越来越多的网站已经从网页模式进化到了 Webapp 模式。它们运行在现代的高级浏览器里,使用 HTML5、 CSS3、 ES6 等更新的技术来开发丰富的功能,网页已经不仅仅是完成浏览的基本需求,并且Webapp通常是一个单页面应用(SPA),每一个视图通过异步的方式加载,这导致页面初始化和使用过程中会加载越来越多的 JavaScript 代码,这给前端开发的流程和资源组织带来了巨大的挑战。
一直没有找到一个合适的展示个人项目的模板,所以自己动手使用 Vue 写了一个。该模板基于 Markdown 文件进行配置,只需要按一定规则编写 Markdown 文件,然后使用一个 在线工具 转为 JSON 文件即可。下面是该项目的在线地址和源码。本文主要记录一下项目中用到的相关知识。
大约是上一年的这个时候,因为项目合并来到了新的项目组中。虽然协作的同岗位同事也是同一个组的,但使用的Gulp 工作流却有些不一样。第一天做项目需求的时候,就遇到了一件让我瞠目结舌的事情:这里的Sass 编译一次居然要10s 以上。 有用过Sass 这类CSS 预处理器都知道10s+ 意味着什么,你每保存一次.scss 文件,都必须等上10s 以上才能看到你所改动的效果。如此一来十分尴尬,因为你直接写原生的CSS 语法比这还快。让我更加惊讶的是当时的项目组相关同事已经用了这套工作流快一年了,却居然能一直默默忍
小编说:历史上先后出现了一系列构建工具,它们各有优缺点。由于前端工程师很熟悉JavaScript,Node.js又可以胜任所有构建需求,所以大多数构建工具都是用Node.js开发的。本文就来一一介绍它们。 前端技术发展之快,各种可以提高开发效率的新思想和框架层出不穷。但是它们都有一个共同点:源代码无法直接运行,必须通过转换后才可以正常运行。 构建就是做这件事情,将源代码转换成可执行的JavaScript、CSS、HTML代码,包括如下内容。 代码转换:将TypeScript编译成JavaScript、将SC
前阵子为了满足工作上的一个需求开发了一个PostCSS 插件,后来也将这个插件提交给PostCSS 官方并得到认可。在这篇文章中笔者将记录开发过程中遇到的一些问题,且斗胆将之称为“最佳实践”,希望对有兴趣尝试PostCSS 插件开发的您有所帮助。 简介篇 开发成果展示 首先先上成果:https://github.com/Jeff2Ma/postcss-lazyimagecss (欢迎给个star 哦~) postcss-lazyimagecss 插件实现的功能是为 CSS 中的background-imag
今天给新来的前端同事安装了 DeepinLinux,然后在运行 React 项目的时候出现了 Error: watch ENOSPC 的报错。我很奇怪为什么会出现这个错误,随后找到了这篇文章,原文如下:
一个功能就是一个模块,多个模块可以组成完整应用,抽离一个模块不会影响其他功能的运行。
gyp ERR! stack Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/gulp/node_modules/fsevents/.node-gyp'
在项目路径下使用 npm init初始化之后,将下面需要安装的依赖复制到package.json文件中
gulp 是一个构建工具,基于Node.js的平台运行,使用的是commonJs的模块化语法。 我们使用gulp需要用到的包 一个TASK任务,对应一个包,对应一个处理逻辑、 gulp.series对应的是同步任务,从左到右,依次执行任务。时间长 gulp.parallel对应的是异步任务,效率高,时间短。 gulp.src 表明文件从哪里读取 gulp.dest 表明文件输出到哪 const gulp = require('gulp'); //gulp的包 const eslint = req
随着前端技术的发展,前端工程化变得越来越重要。前端工程化部分的面试题主要考察应试者对工程化的理解与运用,如何通过工程化来提高代码质量、编译代码、优化代码;如何提高网站性能,保障网站安全,提升用户体验;如何将开发的代码按照理想的方式发布和上线等。
可能很多人对于gulp都相对陌生,特别是vue,react出现以后,渐渐淡出了做业务前端人员的视野,14到16年的时候应该是它最巅峰的时候,真正的是出道即巅峰,取代了当时最火的grunt成为了前端构建的主流工具,就连某度都忍不住来瓜分一下流量,出了个fis(不过按照烂尾的惯例来看,基本会属于后继无人的状态,所以没有真正去用在生产项目中过),而且当时webpack虽然已经出现,但完全不能跟gulp抗衡,直到vue,react等spa项目出现,才让webpack取而代之,gulp也逐渐退出幕前,转战幕后,去做了它更擅长的事情:前端开发流程规范管理。
webpack3.x 主配置webpack.config.js文件,每个模块的详细信息都有一定的注释,如果有不对的地方,还请指教!
使用缘由 前端工程师需要维护的代码变得极为庞大和复杂,代码维护、打包、发布等流程也变得极为繁琐,同时浪费的时间和精力也越来越多,当然人为的错误也随着流程的增加而增加了更多的出错率 简介:grunt是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:压缩文件,合并文件,简单语法检查 为什么要使用Grunt? Grunt生态系统非常庞大,并且一直在增长。由于拥有数量庞大的插件可供选择,因此,你可以利用Grunt自动完成任何事,并且花费最少的代价。如果找不到你所需要的插件,还可以自己动手创造一个
Gulp是一个模块化打包工具。 Gulp本身只有几个入口,支持他拥有强大功能的是各种各样的插件。 Gulp的使用看起来非常简单,只需要一个一个任务链式执行就可以了,它还可以与Webpack结合起来使用 比如将Webpack作为一个插件来处理ES6转换为ES5的操作。 下面记录一下Gulp的API以及一些用到的插件。
友情提示:推荐阅读时间15分钟 + 练习时间15分钟 HTML5学堂:上一期给大家分享了Gulp的安装与使用,让大家对Gulp有着初步的认识。咱们学习使用Gulp的目的是提升开发效率,把开发过程中重复性的工作交给Gulp,让Gulp按照你的配置去完成操作。 Gulp本身给开发者提供了5个API接口,可以根据这些接口来开发Gulp插件。但是,Gulp目前拥有丰富的插件资源,开发人员可以根据项目的需求和个人偏好来配置使用这些插件,比如可以配置当修改了HTML文件浏览器自动刷新,也可以配置修改了CSS文件浏览器自
在 Node.js 出现以前,以往的前端开发工作属于石器时代。而随着前端技术的大爆炸来临,我们需要赶上这一次潮流,加入到前端开发到摩登时代去。这篇博文主要是记录如何构建前端工作流。
如果你有一个 Node.js 项目,并想使用 TypeScript 进行改造,那本文对你或许会有帮助。
In web development we deal with a lot of small technical artifacts. You use HTML to describe page structure, CSS how to style it and JavaScript for logic. Or you can replace HTML with something like Jade, CSS with Sass or LESS, JavaScript with CoffeeScript, TypeScript and the ilk. In addition you have to deal with project dependencies (ie. external libraries and such).
本文的目的在于使用npm进行js类库依赖管理,同时精简html中繁杂的<script>导入。
assets 项目资源目录,dev 开发目录,dist 编译输出目录,gulpfile.js 自动化工具 API
gulp 是一个前端构建工具,它能通过自动执行常见任务,比如编译预处理 CSS ,压缩 JavaScript 和刷新浏览器,来改进网站开发的过程,从而使开发更加快速高效。
gulp 是基于流(stream)的自动化构建工具,能帮助前端节省很多资源。 OK,直接进入主题——本篇中将主要介绍怎么用gulp。
在该项目路径下,我们独立安装gulp:npm install gulp 。此时会生成一个 node_modules 文件夹和一个 package-lock.json 文件,如下图:
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
Gulp安装流程、使用方法及CMD常用命令导览 来自前端小白的gulp及周边知识学习总结 一、名词介绍: Npm——node包管理工具 一开始我不理解,包管理工具是什么鬼。后来用到的gulp也好,gulp的插件包也好,都是要在npm这个里边弄出来的。 可以理解为,一个硬盘,里边放的各种整理好的、适用于各种功能的且不重复的文件夹(插件),然后我们需要啥,就去里边摘下来。 当然也可以用它来删除插件 rimraf删除gulp的模块插件 1、安装:npm install -g rimraf(全局安装),如果
发上来好像格式都变了,有需要的可以给留言,我把为知笔记发给大家!大家如果看着费劲就拉到最后直接看图片部分! 一.基本介绍 gulp是前端开发过程中一种基于流的代码构建工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,不仅可以很愉快的编写代码,而且大大提高我们的工作效率。 gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试
众所周知,微信小程序在发布的时候,对提交的代码有1M大小的限制!所以,如果你正在写一个功能稍微复杂一点的小程序,就必须得时刻小心注意你的代码是不是快触及这个底线了。
📷 别被标题吓到,哈哈,即使现在vite横空出世,社区光芒四射,两个字很快,但是webpack依旧宝刀未老,依然扛起前端工程化的大梁,但是今天我为啥说要拥抱gulp,因为我们常常吃一道菜,所以要换个口味,这样才营养均衡🤣。 gulp定义是:用自动化构建工具增强你的工作流程,是一种基于任务文件流方式,你可以在前端写一些自动化脚本,或者升级历史传统项目,解放你重复打包,压缩,解压之类的操作。 个人理解gulp是一种命令式编程的体验,更注重构建过程,所有的任务需要你自己手动创建,你会对构建流程会非常清楚,这点不像
在前端开发中通常需要做,预处理语言的编译、js文件的压缩、css文件的压缩、图片的压缩等一系列工作,而使用Gulp可以自动化的完成这些工作,从而提高网站的开发效率,在我的博客使用Less中介绍了将Less文件编译成CSS文件的方法,仔细观察可以看到如果按照博客中介绍的方法,在编译多个Less文件或者编译不同文件夹下的Less文件时需要执行多次Less文件编译命令,而使用Gulp可以一次性完成这些操作
本来一天都开开心心,直到跑了一个npm run dev。 原本百分百没有问题的项目,npm run dev的时候某个接口突然跑不通了,一直报504错误。 看了下代码,这个接口是做了本地代理的mock数据接口,之前一直好好的。 查了很久,检查了N遍代码,切了master分支,皆不行。不得已让同事跑了一下此项目,结果 —— 在他们那能正常运行。 嗯,既然如此,真相只有一个:本地环境的问题。 于是开始了漫长的试错与调试。 尝试了如下方法,重装nodejs(怀疑是node 10.0.0的问题),重装node_module,重装gulp,干掉nginx,干掉其它一切可能占用端口的软件,甚至最后重启了电脑。结果 —— 全部铺盖。
微注: 前端更新实在是迅捷!谈及前端打包工具,Gulp 取代 Grunt荣登王者,其宝座还未热乎,16年 Webpack 便劈天盖地席卷而来。即便笔者在记叙这篇文章时候,也早已是投身于 Webpack 的石榴裙下, 且少使用Gulp了;所以,于此你应该有所考量。当然,Gulp很强大,辅助完成些脚本,也是很好的存在,譬如生成雪碧图、Sftp服务器上传等;且在2016年中也更新到4.0——一个很吸引人的版本。(Update@17/01/16) Gulp-sftp的喜忧路 一路从Xftp,winScp,Subli
领取专属 10元无门槛券
手把手带您无忧上云