linux lp0 lp1_lp！我改善了工作流程！

最新推荐文章于 2022-09-02 13:00:15 发布

cumifi2519

最新推荐文章于 2022-09-02 13:00:15 发布

阅读量276

点赞数

文章标签： java vue python 大数据 linux ViewUI

原文链接：https://www.freecodecamp.org/news/gulp-i-improved-my-workflow-354d31d25655/

版权

linux lp0 lp1

by Stefano Grassi

由Stefano Grassi

lp！我改善了工作流程！ (Gulp! I Improved my Workflow!)

Gulp.js的另一种动手经验 (yet another hands-on experience with Gulp.js)

Unless you’ve been living under a rock for the past few years, the number of tools at the disposal of front-end developers have grown rapidly. What we have now is a wide range of projects dedicated to speed-up, automate and increase the quality of our workflow.

除非您过去几年一直处于困境，否则前端开发人员可以使用的工具数量将Swift增长。现在，我们有各种各样的项目致力于加速，自动化和提高工作流程的质量。

For example, just imagine:

例如，想象一下：

compiling SASS/LESS/PostCSS/Stylus to a minified CSS, tailored to your needs, auto-prefixed and in real-time
将SASS / LESS / PostCSS / Stylus编译为缩小CSS，根据您的需求量身定制，并自动进行实时前缀
concatenating and minifying your scripts
串联和最小化脚本
compressing html files created from templates and atomic modules
压缩从模板和原子模块创建的html文件
preview your webapp from a virtual server during the compilation, auto-refreshed and synced to all your devices
在编译过程中从虚拟服务器预览 Webapp，自动刷新并同步到所有设备
test your web performance
测试您的网络性能
self-updating style-guide of the project
自我更新风格-项目指南
compressing images and creating sprites
压缩图像并创建精灵

Some years ago this sounded more like a Disneyan dream but we’re living in the future, so fear not! Grunt, Mimosa, Broccoli and Gulp to the rescue!

几年前，这听起来更像是迪士尼的梦想，但我们生活在未来，所以不要害怕！咕，含羞草，西兰花和古尔普来营救！

Each system has its own strong points. I’ve chosen Gulp for my needs but make sure to check them all out before deciding which best suits you.

每个系统都有自己的优势。我已选择Gulp来满足我的需求，但请确保在确定最适合您之前先将它们全部检查。

所以... 那是什么？ (So… gulp? What’s that?)

gulpjs/gulpgulp — The streaming build systemgithub.com

gulpjs / gulp gulp —流构建系统 github.com

As its site states, Gulp is a “streaming build system” which means that you can set your own tasks to be run on a pipeline, monitor a folder for a change and re-run.

如其站点所述，Gulp是一个“ 流式构建系统 ”，这意味着您可以将自己的任务设置为在管道上运行，监视文件夹以进行更改并重新运行。

And it’s super simple.

而且非常简单 。

Gulp基本概念 (Gulp Basic Concepts)

Let’s sip through the main elements

让我们细读一下主要元素

gulp.taskaka the action you want to achieve. Managing CSS? Generating the docs?Gulp define them with orchestrator, a module that allows us to define dependencies and maximum concurrency

gulp.task就是您想要实现的动作。管理CSS？ Gulp生成文档时使用orchestrator进行定义， orchestrator是一个允许我们定义依赖关系和最大并发性的模块

gulp.task(‘somename’, function() { // Do stuff});

gulp.watchaka the folders you want to keep checked for changes

gulp.watch又名您要保持检查更改的文件夹

gulp.watch(‘folder/*.ext’, [‘firstTask’, ‘secondTask’]);

Every stream originates from a source(s) matching a specific glob (a pattern that a file needs to match)

每个流都来自与特定glob (文件需要匹配的模式)匹配的源

gulp.src(globs[, options])

a series of pipes (actions)

一系列管道 (动作)

.pipe(concat()),.pipe(minify())

and a destination defined with

和目的地具有限定

gulp.dest(path[, options])

To operate, gulp needs two core files, package.json and gulpfile.js.(For the installation of gulp, follow the official docs)

为了进行操作， gulp需要两个核心文件，即package.json和gulpfile.js。 (有关gulp的安装，请遵循官方文档)

Gulpfile.js (Gulpfile.js)

In the gulpfile we’ll declare which plugins are we going to use, the tasks we want to run, which folders we’re going to watch, etc…

在gulpfile中，我们将声明我们将使用哪些插件，我们要运行的任务，我们将要观看的文件夹等...

Package.json (Package.json)

The package.json file is used to store all the information regarding the dependencies of the project (gulp included!).

package.json文件用于存储有关项目依赖项的所有信息(包括gulp！)。

To create it
创建它

$ npm init

You’ll be prompted to enter some basic info for the heading of the file, like the author name, the project name and so on.

系统将提示您输入文件标题的一些基本信息，例如作者名称，项目名称等。

To install a plugin and save the dependency on the json file
安装插件并将依赖项保存在json文件中

$ npm install --save-dev yourPluginName

To uninstall a plugin and remove the dependency on the json file
卸载插件并删除对json文件的依赖

$ npm uninstall --save-dev yourPluginName

If you need to install all the dependencies from a compiled package.json
如果您需要从已编译的package.json 安装所有依赖项

$ npm install

项目组织 (Project Organization)

This is my approach to organize the folder of a project managed with Gulp

这是组织由Gulp管理的项目的文件夹的方法

插件FTW！ (Plugins FTW!)

Gulp has an impressing list of plugins (1895 at the time I’m writing this article)

Gulp的插件列表令人印象深刻(在我撰写本文时，是1895年 )

gulp.js plugin registryDiscover gulp.js pluginsgulpjs.com

gulp.js插件注册表 发现gulp.js插件 gulpjs.com

Must Have

一定有

gulp-load-plugins
gulp-load-plugins

This lazy-loads the plugins installed in your project. You assign a variable to it, and use it to reference other plugins instead of repeating the requirement declaration for every other plugin.
这会延迟加载项目中安装的插件。您为其分配了一个变量，并使用它来引用其他插件，而不是为每个其他插件重复需求声明。

var $ = require('gulp-load-plugins')();

// Example for gulp-concat.pipe($.concat('main.js'))

browsersync
浏览器同步

page refresh at any change on every device connected to the same URL (localhost or LAN)
在连接到相同URL(本地主机或LAN)的每个设备上进行任何更改时，页面都会刷新
sitespeed
站点速度

my favourite tool for performance testing
我最喜欢的性能测试工具
uncss
s

are you using a CSS framework like Bootstrap for a landing page?
您是否正在使用Bootstrap之类CSS框架作为登录页面？

You NEED this.
你需要这个。

什么？您问我如何更新Gulp插件？ (What? How do I update Gulp plugins, you ask?)

$ npm install -g npm-check-updates

$ npm-check-updates -u

$ rm -fr node_modules

$ npm install

Basically this installs npm-check-updates globally, runs it against your package.json and updates the dependency versions.

基本上，这会全局安装npm-check-updates ，对您的package.json运行它并更新依赖版本。