A prepared package for new HTML/CSS/JS projects and easy coding.
- Allow use require (NodeJS) or import (ES6/ES2015) at now [ Browserify: http://browserify.org/ ]
- Allow write ES201x (ES8/ES7/ES6) Javascript at now [ Babel: https://babeljs.io/ ]
- Allow write LESS code for better organization [ LESS: http://lesscss.org/ ]
- Automatic optimization for JPG/PNG/GIF/SVG images [ Imagemin: https://github.com/imagemin/imagemin ]
- Review code for improve quality code, tips and avoid errors [ ESLint: https://eslint.org/ ]
- Automatic tasks and preprocess code when changes [ Gulp & plugins: https://gulpjs.com/ ]
- Minify JS code for production [ UglifyJS: https://github.com/mishoo/UglifyJS ]
- Minify CSS code for production [ CleanCSS: https://github.com/jakubpawlowicz/clean-css ]
- Postprocess CSS and add CSS prefixs [ PostCSS: http://postcss.org/ ]
- Includes a local webserver for development [ GWebserver/LiveReload: https://github.com/schickling/gulp-webserver ]
- Git https://git-scm.com/
- NodeJS/NPM https://nodejs.org/en/
- Gulp https://gulpjs.com/
- ATOM editor https://atom.io/ (recommended), with plugins
- emmet https://atom.io/packages/emmet
- atom-file-icons https://atom.io/packages/atom-file-icons
- autocomplete-json https://atom.io/packages/autocomplete-json
- autocomplete-modules https://atom.io/packages/autocomplete-modules
- gulp-task-launcher https://atom.io/packages/gulp-task-launcher
- minimap https://atom.io/packages/minimap
- pigments https://atom.io/packages/pigments
- linter https://atom.io/packages/linter and dependencies
- busy-signal https://atom.io/packages/busy-signal
- intentions https://atom.io/packages/intentions
- linter-ui-default https://atom.io/packages/linter-ui-default
- linter-eslint https://atom.io/packages/linter-eslint
- linter-less https://atom.io/packages/linter-less
- linter-htmlhint https://atom.io/packages/linter-htmlhint
apt-get install git
npm install -g gulp less eslint babel
apm install emmet atom-file-icons autocomplete-json autocomplete-modules gulp-task-launcher minimap pigments
apm install linter busy-signal intentions linter-ui-default linter-eslint linter-less linter-htmlhint
|
|- src ; Source files of project (for development)
|-- assets ; Static assets (MP3, PDF...)
|-- css ; LESS (CSS) files
|-- img ; Source images (PSD, PDN, JPG, PNG, SVG...)
|-- js ; ES201x Javascript source files
|-- libs ; JS Libraries (Lodash, Underscore, jQuery, etc...)
|- index.html
|- dist ; End files of project (for production)
|-- css
|-- js
|- index.html
|- .git
|- .eslintrc.json ; JSON ESlint Linter Config
|- gulpfile.js ; JS Tasks Gulp Config
|- package.json ; JSON NPM Package Config
- Remember! Don't touch dist/ files. You should only edit files in src/ folder.
git clone https://github.com/ManzDev/document-blank.git project-name
cd project-name
npm install
With next commands you can generate end HTML, CSS and JS files.
gulp html ; Copy HTML files to dist/
gulp css ; Preprocess LESS, PostCSS & plugins and minify with CleanCSS to dist/
gulp js ; Preprocess JS with Browserify, Babel and minify with UglifyJS to dist/
gulp libs ; Concatenate JS libraries and minify with UglifyJS to dist/
gulp html css js libs ; Alias for prev tasks
gulp ; Alias for prev tasks
gulp assets ; Process static files (only new files) to dist/
gulp images ; Process and optimize images (JPG, PNG, GIF, SVG...) to dist/
gulp watch-html ; Watch HTML and launch tasks if changes
gulp watch-css ; Watch LESS and launch tasks if changes
gulp watch-js ; Watch JS/ES6 and launch tasks if changes
gulp www ; Launch local web server
gulp watch ; Watch all prev tasks (and local web server)
- Change Gulp webserver / Livereaload to Browser Sync https://browsersync.io/
- Implement polyfill system for outdated browsers https://polyfill.io/v2/docs/
- Implement polyfill WHATWG Fetch for outdated browsers https://github.github.io/fetch/
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent