GitHub - Zaid-Hu/samleTravelSite: View at:

Branches Tags

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
app		app
docs		docs
gulp		gulp
.gitignore		.gitignore
gulpfile.js		gulpfile.js
package.json		package.json
readme.txt		readme.txt
webpack.config.js		webpack.config.js

Repository files navigation

This is a single page web app powered by npm packages

Developping Tools involved: Gulp, PostCSS, ES6, JQuery 

npm packages:

babel: ES6
lazysizes: Image Lazy loading
normalize: CSS standard
waypoints: show content only when scrolling page
del: delete files and folders

browserSync:    reload page when saved change

webpack:    pack and transform js files

gulp:           automate Developping process
gulp-watch:     watch files changes and run tasks accordingly
gulp-usemin:    copy and move html/css/js files properly
gulp-cssnano:   minify css files
gulp-imagemin:  minify images
gulp-uglify:    minify js files
    
gulp-postcss:   postcss support
postcss-import: import css modules
postcss-mixins: set media queries 
postcss-nested: nested css rule like how Sass support it
postcss-simple-vars:    Sass like variables
postcss-hexrgba:        rgba(#0fab53, 0.8) --> rgba(15,171,83, 0.8)  (variable support for rgba)

gulp-rename:    rename files
gulp-rev:       content revision by append hash code to file names (sprite.svg --> sprite-0f9283b3.svg) 


picturefill: responsive image - picture element & srcset attribute (broswer support)
gulp-modernizr: add attr to <html> tag shows whether current broswer support svg/css property .etc (broswer support)
autoprefixer: css property prefixer (broswer support)