Post on 15-Apr-2017
transcript
Web development
tools
@_francois06
@hugomallet@53JSdevDecember 2016University of Nice Sophia Antipolis
{ starter pack }
And we love gif !
#WhatDoWeNeed?
Web development tools
FASTD.R.Y.FLEXIBLE
Improve development
Localhost serverLiveReload Package managerModule bundlerSASS with sourcemap...
to focus on the features of your own app
Prepare for deployment
Concatenate JS, CSS Minify CSS, HTML, JS, imagesCopy all the files in dist folder
Package your app for differents platforms (apk, ipa, exe, html)
Must be done in one command line
> npm init
> npm install commander
> npm test
> npm publish
#!/usr/bin/env node
const program = require('commander');const pkg = require('./package');
program.version(pkg.version) .option('-n, --name [value]', 'Name') .parse(process.argv);
console.log('Hello ' + program.name);
Automate and enhance your workflow
npm install -g gulp-cli
npm init
npm install gulp --save-dev
Task gulpconst gulp = require('gulp');
gulp.task('build', function() {
// do something...
});
gulp.task('default', 'build', function() {
console.log('default task');
});
# gulpfile.js
> gulp
Starting 'build'
Finished 'build'
Starting 'default'
Finished 'default'
> gulp build
Starting 'build'
Finished 'build'
Terminal
streams
gulp
.src('scripts/*.js')
.pipe(applySomething())
.pipe(gulp.dest('dist/scripts'));
gulp.task('sass', function() {
return gulp.src('app/styles/main.scss')
.pipe($.sourcemaps.init())
.pipe($.sass({
outputStyle: 'nested', // libsass doesn't support expanded yet
precision: 10,
includePaths: ['.'],
onError: console.error.bind(console, 'Sass error:')
}).on('error',$.sass.logError))
.pipe($.if(production,
$.replace('node_modules/bootstrap-sass/assets/fonts/bootstrap', 'fonts')))
.pipe($.autoprefixer({
browsers: ['last 1 version']
}))
.pipe($.if(production, $.sourcemaps.write('.', {
includeContent: false,
sourceRoot: './'
})))
.pipe(gulp.dest('dist/styles'));
});
WATCH & RELOAD
1. Start a server
2. Watch files
3. Reload files in browser
const connect = require('connect');
const connectLivereload =
require('connect-livereload');
const gulp = require('gulp');
const serveStatic = require('serve-static');
gulp.task('serve', function() {
var app = connect()
.use(connectLivereload({
port: 35729
}))
.use(serveStatic('app'))
.listen(9000);
});
const livereload = require('gulp-livereload');
gulp.task('watch', ['serve'], function() { livereload.listen();
gulp.watch([
'app/scripts/**/*.js',
'app/images/**/*',
'.tmp/styles/*'
]).on('change', livereload.changed);
gulp.watch(['styles/**/*.{css,scss}'], ['sass']);
});
gulp.task('default', ['watch']);
Serve files Watch files and reload
SCSS !$color: blue;
li {// menu linksa {
background: $color;}
}
CSS# dist/main.css
li a {background: blue;
}
const gulp = require('gulp');
const sass = require('gulp-sass');
gulp.task('sass', function() {
return gulp.src('app/styles/main.scss')
.pipe(sass())
.pipe(gulp.dest('dist/styles'));
});
BE LAZY
“I choose a lazy person to do a hard job.
Because a lazy person will find an easy way
to do it.”
― Bill Gates
Be lazy : example const gulp = require('gulp');
const sass = require('gulp-sass');
const debug = require('gulp-debug');
gulp.task('sass', function() {
return gulp.src('app/styles/main.scss')
.pipe(debug())
.pipe(sass())
.pipe(gulp.dest('dist/styles'));
});
const gulp = require('gulp');
const $ = require('gulp-load-plugins')(),
gulp.task('sass', function() {
return gulp.src('app/styles/main.scss')
.pipe($.debug())
.pipe($.sass())
.pipe(gulp.dest('dist/styles'));
});
npm i -D gulp-load-plugins
Debug gulp-plumber
Prevent pipe breaking caused by errors from gulp plugins
https://gist.github.com/floatdrop/8269868
gulp-debug
Debug vinyl file streams to see what files are run through your gulp pipeline
Let’s require('modules')in the browser
Require ?# lib/module.js
exports.multiply = function multiply(a, b) {
return a * b;
}
exports.add = function add(a, b) {
return a + b;
}
# tests/module.js
const assert = require('assert');
const mymath = require('../lib/module');
const multiply = mymath.multiply;
describe('mymath', () => {
describe('#multiply(a, b)', () => {
it('should return 6 with 2 and 3', () => {
assert.equal(6, multiply(2, 3));
assert.equal(6, multiply(3, 2));
});
});
});
Browserify : require in the browser !
> npm install -g browserify
> npm install --save jquery
> browserify main.js -o dist/bundle.js
const $ = require('jquery');
const mult = require('./lib/module').multiply;
let $a = $('.num-a');
let $b = $('.num-b');
$('button').on('click', function onClick(event) {
mult($a.val(), $b.val());
});
Terminal # main.js
be prepared for
ES6 Modules
export function multiply(a, b) { … }
import { multiply } from './lib/module'
+≃
ESLintShare style guides !
Avoid mistakes !
# .eslintrc
/* * Extending the code style * of the devs at Airbnb */
{
'extends': 'eslint-config-airbnb'
}
{ SOURCEMAPS }
> npm publish
This is just an overview ...
Build your own gulpfile.js
adapted to your tools and methods !
A sample we made for you : https://github.com/53js/simple-webapp/
And now you need to choose a good JavaScript framework http://todomvc.com/
Last important thing