flux:web-basic00
Table of Contents
Description
- Flux de travail SCSS + JS + HTML
- Automatisation via Grunt
- linting/hinting/validation
- HTML validation : grunt-html-angular-validate
- CSS
- JS
- process/compression
- SASS (SCSS) → CSS (style.uncompressed.css)→ CSS compressé (style.css)
- JS → JS compilé (Google Closure) et compressé
- HTML → HTML Compressé ()
- Éditeur ATOM avec JSCS (le profil est a déterminer, le profil airbnb est ES6 même s'il existe une version du styleguide pour ES5.
structure
/site // version de production compressée .jscsrc (JSCS config file) .gitignore (GIT ignore config file) package.json *.html /a (assets) j.js // fichier js concaténé + compressé c.css // css compressé /i (img) /src /scss /js /html /build // fichiers CSS générés depuis SCSS et les js concatenés + HTML *.html /a (assets) j.js c.css
installations
Ruby
OSX
Déja installé.
Linux (debian-based)
apt-get install ruby
SASS
sudo gem install sass
ATOM
OS X
→ .dmg
Linux (debian-based)
→ .deb ?
JSCS
Dans le terminal :
apm install linter-jscs
Nodejs
OSX
.pkg ?
Linux (Debian-base)
?
initialisation NPM
npm init
Grunt
installation globale de Grunt (Commande-Line Interface)
npm install -g grunt-cli
dev : installation des plugins
npm install grunt-contrib-concat --save-dev npm install grunt-contrib-sass --save-dev npm install grunt-contrib-watch --save-dev
dev : documentation des plugins
fichiers de configuration
.jscrc
{ "preset": "airbnb", "requireCamelCaseOrUpperCaseIdentifiers": null }
.gitignore
.DS_Store node_modules .tmp site .sass-cache
+ https://github.com/gruntjs/grunt/blob/master/.gitignore ?
+ https://github.com/github/gitignore/blob/master/Sass.gitignore
+ https://github.com/github/gitignore/blob/master/Node.gitignore
package.json
gruntfile.js
module.exports = function (grunt) { grunt.initConfig({ concat: { dist: { src: ['src/js/*/*.js', 'src/js/*.js'], dest: 'site/a/j.js', }, }, sass: { dist: { options: { style: 'expanded', }, files: { 'site/a/c.css': 'src/scss/style.scss', }, }, }, }); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-sass'); grunt.registerTask('default', ['concat:dist', 'sass:dist']); };
flux/web-basic00.txt · Last modified: 2016/04/03 23:38 by leo