{"id":17910781,"url":"https://github.com/thebuilder/gulp-project-template","last_synced_at":"2025-07-01T13:42:41.620Z","repository":{"id":66184827,"uuid":"20795723","full_name":"thebuilder/gulp-project-template","owner":"thebuilder","description":"The basic setup for a new web project using Gulp.","archived":false,"fork":false,"pushed_at":"2017-05-03T08:21:50.000Z","size":120,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-03T06:41:48.987Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thebuilder.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-06-13T07:22:45.000Z","updated_at":"2014-09-02T09:10:42.000Z","dependencies_parsed_at":null,"dependency_job_id":"2f1da323-4a3b-443b-84e5-b2c3a3f1f116","html_url":"https://github.com/thebuilder/gulp-project-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/thebuilder/gulp-project-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thebuilder%2Fgulp-project-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thebuilder%2Fgulp-project-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thebuilder%2Fgulp-project-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thebuilder%2Fgulp-project-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thebuilder","download_url":"https://codeload.github.com/thebuilder/gulp-project-template/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thebuilder%2Fgulp-project-template/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262973942,"owners_count":23393317,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-28T19:34:32.806Z","updated_at":"2025-07-01T13:42:41.592Z","avatar_url":"https://github.com/thebuilder.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"gulp-project-template [![Codeship Status for thebuilder/gulp-project-template](https://codeship.io/projects/58d76280-fded-0131-f546-4ebc8a94177b/status?branch=master)](https://codeship.io/projects/29482)\n=====================\nA template combining Gulp, Browserify, LiveReload and Jade, for a sweet starting point for new Angular projects.\n\n\n##Getting started\nThe following tools are required when developing the project locally:\n\n* [Node.js](http://nodejs.org/ \"Node\")  \n  Make sure node is installed and paths are configured, so you can use **npm** from the terminal.\n  \n* [Gulp](https://github.com/gulpjs/gulp \"Gulp\")  \n  Make sure Gulp is installed globally.\n\n\t\tnpm install -g gulp\n\n* [Bower](http://bower.io/ \"Bower\")\n  Make sure Bower is installed globally.\n\n\t\tnpm install -g bower\n\t\t\n* ~~[LiveReload](http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions)~~   LiveReload gets injected into the HTML when compiling development builds. This enables LiveReload in all browsers and   devices, not just Chrome.\n\nInstall the project node modules.   \n\t\t\n\tnpm install\n\nInstall the bower components.\n\n\tbower install\n\nTo start developing run **gulp**. This will compile files, start a webserver and watch for changes. Any file changes will cause LiveReload to trigger an update of the html page.\n\n    gulp\n\n\n##Webstorm setup\nIf you are using Webstorm, you should make sure that it is configured for the project. This includes setting up JS libraries, scope and directories.\n\n\n###Directories\nYou should mark the following directories inside Webstorm:\n\n#####Excluded \n* **node_modules**\n* **test/reports/coverage/{BROWSER}/js** _Exclude the coverage JS directory. Otherwise you will get duplicate .html files (detailing coverage) everything you are looking up a .js file._\n\n#####Resource Root \n* **src** _Ensures correct relative paths in source files._\n* **src/less** _You will need this to get correct relative image paths in .css_\n\n#####Tests \n* **test**\n\n\n###JS Libraries\n\t\n\tPreferences \u003e Javascript \u003e Libraries\n\nTo get proper code completion, you need to spend 10 minutes configuring the libraries you are using.\n\n\n####Project libraries\nYou can mark files and directories in the project as libraries. This allows you to assign a scope for where they should be used, and helps with Webstorm code completion.\n\n* **bower_components**\n* **node_modules**\n\nYou can mark specific files/directories inside **bower_components** as a library, to give you better control over what is exposed. However you should generally prefer the \"Typescript Community Stubs\" if the library exists there.\n\n####Typescript Community Stubs\nMost of the Third Party libraries have Typescript interfaces that can be used. These interfaces knows exactly how the code is structured, what methods expect and what they return.\n\nTo get these, you should choose **Download**, and change the dropdown to \"Typescript Community Stubs\". Find the relevant lib, and add it. You will want the following:\n\n* **angularjs**\n* **greensock**\n\nFor testing these frameworks are used:\n\n* **angular-protractor**\n* **jasmine**\n* **selenium-webdriver**\n\n###Scope\nOnce you have prepared the libraries the project needs, you should configure the Scope. This specifies what JS should be available to which source files. For example, you do not want access to **node_modules** in your src files, since you would get a ton of irrelevant code completion hints.\n\nThe following is a suggestion for the libraries mentioned above. If you add more libraries, make sure to consider how it should be scoped.\n\n###Mark as plain text\nA final *\"trick\"* is to mark compiled files as plain text. This stops Webstorm from indexing the js/css, so you won't see references to compiled files in code completion.\n\nYou should exclude the following:\n\n* **dist/js/*.js**\n* **dist/css/app.css**\n* **test/bundle/*.js**\n\n\n##Karma+Jasmine Testing\nThe project is configured to use Karma and Jasmine for testing.\n\nA special browserify task is configured to compile all **\\*.spec.js** files in the src directory. This allows you to use **require()** when testing, which could be useful for things like:\n\n* Require specific **.js** files when testing, instead of retrieving them from the compiled **app.js**\n* Include dummy **.json** files when parsing data.\n* Include dummy **.html** or **.jade** files.\n\nThe compiled **test.bundle.js** file includes a source map, so it will log the original file position if an error occurs.\n\n\n\n###Karma\nKarma is the engine that loads the **.js** and executes the tests.\n\nAll the karma specific configuration is located in the **karma.conf.js** file in the project root. When running the karma gulp tasks you can override these options.\n\n###Jasmine\nJasmine is the framework used to write the tests. It is explained and demonstrated on their own website: \n[Jasmine 2.0](http://jasmine.github.io/2.0/introduction.html) \n\nA simple test could look like: \n\n```javascript\ndescribe(\"A suite\", function() {\n  it(\"contains spec with an expectation\", function() {\n    expect(true).toBe(true);\n  });\n});\n```\n\n##Protractor\nProtractor is an E2E testing framework built for AngularJS.\n\n####Debugging with Element Explorer\nYou can start an interactive version of the element explorer, so you can test out the various Protractor commands. This will allow you to quickly see the result of various locators and commands.\n\nGet a selenium server running at **localhost:4444**:\n\n\tnode node_modules/gulp-protractor/node_modules/.bin/webdriver-manager update\n\tnode node_modules/gulp-protractor/node_modules/.bin/webdriver-manager start\n\nStart element explorer on the Node server **localhost:3000** (make sure it is running, by executing `gulp serve`):\n\n\tnode node_modules/gulp-protractor/node_modules/protractor/bin/elementexplorer.js localhost:3000\n\nThis will load up the URL on WebDriver and put the terminal into a REPL loop.\nYou will see a \u003e prompt. The `browser`, `element` and `protractor` variables will be available. Enter a command such as:\n\n    \u003e element(by.id('foobar')).getText()\n\nor\n\n    \u003e browser.get('http://localhost:3000/subpage.html')\n\nTo get a list of functions you can call, try:\n\n    \u003e browser\n\nTyping \u003ctab\u003e at a blank prompt will fill in a suggestion for finding\nelements.\n\nUse the `list` helper function to find elements by strategy:\n  e.g., `list(by.binding(''))` gets all bindings.\n  \nSee the complete [Protractor API](http://angular.github.io/protractor/#/api)\n\n\n##Continues Integration\nIf setting up a CI server, like [codeship.io](http://codeship.io), use the following commands in a Node 0.10.x env:\n\n\n```\n# Install the modules\nnpm install --silent\nnpm install bower gulp -g --silent\nbower install -f --silent\n\n# Test commands\ngulp release test\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthebuilder%2Fgulp-project-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthebuilder%2Fgulp-project-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthebuilder%2Fgulp-project-template/lists"}