gulpjs/gulpjs.github.io

The gulp website

gulpjs.com

This is the repository containing the code for the official gulp website gulpjs.com.

Contributing

This website is built using Docusaurus 2, a modern static website generator.

Getting started

To get started working on this site you first need to clone this repository

$ git clone git://github.com/gulpjs/gulpjs.github.io

When you are done making your improvements, create a Pull Request.

Installation

$ npm install

Local Development

$ npm start

This command will first pull down the markdown documentation from the main gulp repository, then starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.

Build

$ npm build

This command generates static content into the build directory and can be served using any static contents hosting service.

Thanks

Many thanks are owed for this website!

• The very talented @vaninawohlleb for the website design
• All the content work by @janiceilene
• Code screenshots from Carbon
• Docusaurus for the entire framework

gulpjs.github.io's Issues

Contribute Section

It would be nice to have a "Support Us"/Contribute section on the homepage like @aliceperez's designs at https://marvelapp.com/gj54hh/screen/14587285

It would be nice to show off some of our supporters as well because we've been asked to link to companies that would back us.

Quick Start

Change all h3 subheadings to h2. This change was made in the Google Doc already, just copy it over.

New OpenCollective version broke our contributor list

They removed the totalDonation field and didn't include a replacement. I'm working with them to sort it out.

Mobile responsive

The navigation bar is not responsive with small size devices!

lastRun table

The column widths in the table in the Timestamp precision section. The first column is too narrow, the second column is too wide.

Sip for "Task Custom Metadata"

Ref https://github.com/gulpjs/gulp-cli#custom-metadata

"Built With Gulp" Badge

It would be nice to see gulp also have it's own "built with gulp" badge similar to what Grunt is doing and host via cdn? I see some projects use the custom https://shields.io implementation but there is no standardized badge.

See: http://gruntjs.com/built-with-grunt-badge

Design candidate:

SVG: https://www.dropbox.com/s/ug6q1oplcmoo1zk/builtwith.svg?dl=0

Contribute section needs a way to show off our Sponsors/Backers

We really want a way to show off Sponsors and Backers on the website. This needs to be designed and developed (mockups first, etc).

We've been asked by multiple Sponsors to have their logo on our website (but it wouldn't have worked in the old design). With the redesign, there's plenty of room to fit logos somewhere near the contribute section.

We also want to show off a subset of the Backers to encourage people to increase donation amounts/durations and to keep the website from getting cluttered.

looks buggy on iOS7

it's a little bit horrible to inspect it with the safari inspector. so i can't say for sure what cause it. maybe when i'll download iOS simulator for iOS 7 it would be easier.
but my guess it's related to a buggy behavior of the vh / vw units.

Blog post explaining the deprecation of gulp-util

Need to describe the plan, why it changed and why the module was deprecated last week.

This will then be linked from the deprecation message and probably on the repo also.

Scaffolding

Is there a template to follow for creating a Gulp plugin?

GruntJS has an excellent scaffolding application that bootstraps it for you. Would be handy to have something similar, but a default repo to clone from would be great.

For the time being, I follow the format of some popular modules

Adding boilerplate projects

After talking about the homepage of the projects and how to describe gulp i thougth it would be nice to provide some boilerplate projects for each versions. Like creating new repository like gulpjs/gulpjs-boilerplate having readme and folders for each versions and specifications described for each case. By the way it could be nice to introduce some new internal gulp plugins too.

I can write it easily. Let me know if you're.

No explanation of what Gulp actually is

There is nowhere on the website that says:

• what Gulp is
• what it does
• why someone might want to use it

This seems like it would be off putting to someone who perhaps hasn't used Gulp before. "Automate and enhance your workflow" is fine, but doesn't help newcomers.

Just a short explanation of what it is/does would be useful.

Add space above and below code blocks

Add 2rem margin above and below code blocks. Except for code blocks in the Quick start page, those shouldn't change.

vinyl adapters

Need to pick a new npm keyword and add listing of these to the site

Plugins page throws error

The Gulp JS home page throws an error after loading 139 plugins

Uncaught TypeError: Cannot read property '1' of null

Chrome and FFox tested.

Sip for top-level `watch()`

Compare watch() inside or outside tasks.

Adopt "What is Gulp" section?

Should we adopt the "What is gulp" section from @aliceperez's mockups (https://marvelapp.com/gj54hh/screen/14587285)?

Add gulp to the site?

Just wanted to see if there was any interest in adding a basic build system before the site gets to built out. The single css file is already a little unwieldy for me, and it might be nice to enforce some linting as well. A happy little side-effect could be that any code examples on the site can be copied straight from the repo itself, keeping them at least somewhat relevant over time. Thoughts?

Some Gulp plugins don't appear in search results

Searching for contrib doesn't yield any results, for example, gulp-contrib-clean is not appearing in the search results, although it's appearing on npm directly.

new site

Plans:

• Nice landing screen
• Example section with scrollspy
  • similar to http://goratchet.com/components/ but walking you through the sample gulpfile
• Proper documentation section
  • consolidate readmes from gulp, vinyl-fs, glob-watcher, glob-stream, and vinyl
• New plugin search site

Favicon Update!

Hey @contra

I tried to update a favicon for the website without the white space as seen in the current website, but I'm facing some issues with 'crfl' so it's showing all files as modified as soon as I clone the forked repository.

So I'm attaching the new icon along with this ticket. If you feel it looks good go ahead and update it!

Here is the favicon.ico link - http://cl.ly/WopQ

Thanks,
LP

The website is down

I am getting a DNS error from gulpjs.com

add stats section

Mockup:

plugins page is broken

Errors:

"NetworkError: 404 Not Found - http://registry.gulpjs.com/_search?fields=name,keywords,rating,description,author,modified,homepage,version&from=0&q=keywords:gulpplugin,gulpfriendly&size=20"
_search...size=20
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://registry.gulpjs.com/_search?fields=name,keywords,rating,description,author,modified,homepage,version&from=0&q=keywords:gulpplugin,gulpfriendly&size=20. This can be fixed by moving the resource to the same domain or enabling CORS.
Error: data.hits is undefined formatData@http://gulpjs.com/plugins/js/app.js:1:481 transformData/<@http://gulpjs.com/plugins/js/vendor.js:34:875 forEach@http://gulpjs.com/plugins/js/vendor.js:32:1392 transformData@http://gulpjs.com/plugins/js/vendor.js:34:845 transformResponse@http://gulpjs.com/plugins/js/vendor.js:34:2052 qFactory/defer/deferred.promise.then/wrappedErrback@http://gulpjs.com/plugins/js/vendor.js:34:30619 qFactory/createInternalRejectedPromise/<.then/<@http://gulpjs.com/plugins/js/vendor.js:35:48 $RootScopeProvider/this.$get</Scope.prototype.$eval@http://gulpjs.com/plugins/js/vendor.js:35:8451 $RootScopeProvider/this.$get</Scope.prototype.$digest@http://gulpjs.com/plugins/js/vendor.js:35:6300 $RootScopeProvider/this.$get</Scope.prototype.$apply@http://gulpjs.com/plugins/js/vendor.js:35:8876 done@http://gulpjs.com/plugins/js/vendor.js:34:5230 completeRequest@http://gulpjs.com/plugins/js/vendor.js:34:9483 createHttpBackend/</xhr.onreadystatechange@http://gulpjs.com/plugins/js/vendor.js:34:10420


...se);parseAbsoluteUrl(appBase,this,appBase),this.$$parse=function(url){var pathUr...

Create a section of which articles need screenshot updating with version releases

Use of *nix only commands in cli examples may confuse windows users

Specifically, $ touch gulpfile.js in img/cli.svg. Since it's just going to throw a "command not found" on windows, it may be best to swap it for something or remove that line altogether, since gulp --help just throws a different error about needing a default task. There's also the option to detect windows users and swap the line for a windows alternative when detected, but I doubt you all want to add any javascript at this point. Thoughts?

List popular projects that use Gulp

I found a few projects:

https://github.com/cytoscape/cytoscape.js

https://github.com/godaddy/jquery-nearfar

https://github.com/driftyco/ionic

https://github.com/mrmrs/pesticide

https://github.com/skidding/cosmos

https://github.com/durated/angular-scroll

Open source tags - discussion

What do you guys think about adding the open protocol meta tags to the site?

Add readme explaining how to work on the site

We've been receiving some questions on how to work on the site. We should have a readme describing the workflow (non-build process, static site). Ref #39 (comment) for the simplest explanation.

Site logo not loading

Hey was just checking out gulpjs.com and noticed that the logo is broken.

![http://imgur.com/OiAvSik.png]

It seems like the GitHub hotlink isn't really working.

I'm no expert on referencing files on GitHub so I can't really suggest a fix sorry.

add something that explains the pipeline

Need a animation/video that shows file transformation pipelines and looks snazzy. This is to explain what gulp is and how it works.

Example pipeline would be best with CSS/JS and show vendor prefixing and whatnot.

If it's too difficult to explain, we could also make a nice video (I can do this) with a voice over and graphics.

Using Plugins

Consider changing the sub heading "Do you need a plugin?" It's currently the only sub heading with a question mark. Maybe something like "Plugins aren't always needed"?

Migrate to Jekyll

Migrating to Jekyll will help -

• Build faster pages
• Write better docs and guidelines
• Use variety of plugins available to use.

Sip for streams

gulpjs/gulp#2027 gave me the idea that we could make a Sip about streams and the difference between buffer streams and vinyl streams.

Docusaurus theme for the gulp website

Hey website team! We are in need of a GitBook theme for the documentation refresh. More information at gulpjs/gulp#1595

Anyone available to tackle this?

Sip for "CLI configuration file support"

Ref https://github.com/gulpjs/gulp-cli#configuration

Plugin page: Show vinyl adapters

Moved from #17

Remove trailing slashes from links in plugin list

Didn't find where sources of https://gulpjs.com/plugins/ page located so posting here instead.

NPM website has updated recently and now links containing a slash after package name do not resolve correctly, resulting in a 404 page. Compare: with, without

Code in question:

<!--                                          this slash ↴ -->
<a ng-href="https://www.npmjs.com/package/{{plugin.name}}/" target="_blank" title="Install" class="title" ng-bind="plugin.name"></a>

Adopt the "getting started" flow from mockup?

Would we want to adopt the "Getting Started" flow from @aliceperez's mockup (https://marvelapp.com/gj54hh/screen/14587285) instead of linking to the GitHub docs for Getting Started?

Add Sip guidelines

Basic guidelines for formatting a Gulp Sips Series article

Article Structure

Title
Large Image (replaces 55 words)
Series Description as shown: This is part of our Gulp Sips series: bringing you easily-digestible bits of information on our advanced or unknown features.
Body (can be What?, How?, Why?)

Notes:

• No more than 200 words/2 minute read, including images. This is based on the Medium’s basic time calculations.
• Add a cmd + enter between each titled section
• To add code to Medium
  • Block code: add ```before your code
  • To add inline code, type your code, highlight it, then click ` (a single tick).

Add nofollow to sponsor links

Create a section of the public repo to suggest new Sips topics, which anyone can write

Getting a cert error from the link in the readme

Looks like the first link in the readme is pointing to https://gulpjs.com, which gives a cert error. The link in the description and the first google result are both http. Not sure if this is something that never worked or if the cert has expired or what.

Write Sip explaining `interpret`

We should explain how/why we do automatic language parsing based on extensions. Ref gulpjs/gulp#2073

Make code snippets smaller

Change font-size of code from 16px to 14px.

Building a docs website

What is likely to build a Documentations website for gulp!

Search in plugin page is not working

Typing in the search box does nothing and I tried it in FF and Chrome.

Better describe what gulp is on the homepage

This should probably be above the fold unless it ends up being multiple bullet points.

I wanted to open this issue so we can discuss what this should say and look like.

Ref #39

Add SSL for gulpjs.com

Right now, a valid ssl cert is not available on your website.

The following steps could be considered to easily get SSL:

• Cloudflare (CDN only)
• Netlify (Static builds, hosting & CDN)
• LetsEncrypt (Cert only)