├── gulp ├── paths │ ├── app.js │ ├── css.foundation.js │ ├── js.foundation.js │ └── tasks.js ├── config.js └── tasks │ ├── clean.js │ ├── js.lint.js │ ├── copy.image.js │ ├── js.foundation.js │ ├── serve.js │ ├── css.foundation.js │ ├── js.process.js │ ├── watch.js │ ├── pug.js │ ├── sass.js │ └── sprite.svg.js ├── source ├── style │ ├── app.scss │ └── common │ │ └── greating.scss ├── images │ └── viking.png ├── template │ ├── common │ │ └── _greating.pug │ ├── pages │ │ ├── index.pug │ │ └── another-page.pug │ └── _template.pug └── js │ └── app.js ├── .eslintrc ├── README.md ├── .gitignore ├── package.json └── gulpfile.js /gulp/paths/app.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = [ 4 | './source/js/app.js' 5 | ]; -------------------------------------------------------------------------------- /source/style/app.scss: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | } 4 | 5 | @import 'common/greating'; 6 | -------------------------------------------------------------------------------- /source/images/viking.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loftschool/gulp-builder-dz1/HEAD/source/images/viking.png -------------------------------------------------------------------------------- /gulp/paths/css.foundation.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = [ 4 | './node_modules/normalize.css/normalize.css' 5 | ]; 6 | -------------------------------------------------------------------------------- /gulp/paths/js.foundation.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = [ 4 | './node_modules/jquery/dist/jquery.min.js' 5 | ]; 6 | -------------------------------------------------------------------------------- /source/template/common/_greating.pug: -------------------------------------------------------------------------------- 1 | .greating 2 | .greating_text Hello! I'm your training builder. 3 | .greating_picture 4 | -------------------------------------------------------------------------------- /gulp/config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: './build', 3 | 4 | autoprefixerConfig: ['last 3 version', '> 1%', 'ie 8', 'ie 9', 'Opera 12.1'] 5 | }; -------------------------------------------------------------------------------- /source/template/pages/index.pug: -------------------------------------------------------------------------------- 1 | extends ../_template 2 | 3 | block variables 4 | - var title = 'Home page' 5 | 6 | block content 7 | include ../common/_greating -------------------------------------------------------------------------------- /source/template/pages/another-page.pug: -------------------------------------------------------------------------------- 1 | extends ../_template 2 | 3 | block variables 4 | - var title = 'Another page' 5 | 6 | block content 7 | h1 It's some another page -------------------------------------------------------------------------------- /gulp/tasks/clean.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function() { 4 | $.gulp.task('clean', function(cb) { 5 | return $.del($.config.root, cb); 6 | }); 7 | }; 8 | 9 | -------------------------------------------------------------------------------- /source/js/app.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | 4 | setTimeout(function() { 5 | document.querySelector('.greating_picture').classList.add('m--show'); 6 | }, 1000); 7 | })(); -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true 4 | }, 5 | "extends": "eslint:recommended", 6 | "rules": { 7 | "indent": [2, 2], 8 | "quotes": [2, "single"], 9 | "semi": [2, "always"] 10 | } 11 | } -------------------------------------------------------------------------------- /gulp/tasks/js.lint.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function() { 4 | $.gulp.task('js:lint', function() { 5 | return $.gulp.src($.path.app) 6 | .pipe($.gp.eslint()) 7 | .pipe($.gp.eslint.format()); 8 | }) 9 | }; 10 | -------------------------------------------------------------------------------- /gulp/tasks/copy.image.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function() { 4 | $.gulp.task('copy:image', function() { 5 | return $.gulp.src('./source/images/**/*.*', { since: $.gulp.lastRun('copy:image') }) 6 | .pipe($.gulp.dest($.config.root + '/assets/img')); 7 | }); 8 | }; 9 | -------------------------------------------------------------------------------- /gulp/tasks/js.foundation.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function() { 4 | $.gulp.task('js:foundation', function() { 5 | return $.gulp.src($.path.jsFoundation) 6 | .pipe($.gp.concat('foundation.js')) 7 | .pipe($.gulp.dest($.config.root + '/assets/js')) 8 | }) 9 | }; 10 | -------------------------------------------------------------------------------- /gulp/tasks/serve.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function() { 4 | $.gulp.task('serve', function() { 5 | $.browserSync.init({ 6 | open: false, 7 | server: $.config.root 8 | }); 9 | 10 | $.browserSync.watch([$.config.root + '/**/*.*', '!**/*.css'], $.browserSync.reload); 11 | }); 12 | }; 13 | -------------------------------------------------------------------------------- /gulp/tasks/css.foundation.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function() { 4 | $.gulp.task('css:foundation', function() { 5 | return $.gulp.src($.path.cssFoundation) 6 | .pipe($.gp.concatCss('foundation.css')) 7 | .pipe($.gp.csso()) 8 | .pipe($.gulp.dest($.config.root + '/assets/css')) 9 | }) 10 | }; 11 | -------------------------------------------------------------------------------- /gulp/tasks/js.process.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function() { 4 | $.gulp.task('js:process', function() { 5 | return $.gulp.src($.path.app) 6 | .pipe($.gp.sourcemaps.init()) 7 | .pipe($.gp.concat('app.js')) 8 | .pipe($.gp.sourcemaps.write()) 9 | .pipe($.gulp.dest($.config.root + '/assets/js')) 10 | }) 11 | }; 12 | -------------------------------------------------------------------------------- /gulp/tasks/watch.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function() { 4 | $.gulp.task('watch', function() { 5 | $.gulp.watch('./source/js/**/*.js', $.gulp.series('js:process')); 6 | $.gulp.watch('./source/style/**/*.scss', $.gulp.series('sass')); 7 | $.gulp.watch('./source/template/**/*.pug', $.gulp.series('pug')); 8 | $.gulp.watch('./source/images/**/*.*', $.gulp.series('copy:image')); 9 | }); 10 | }; 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Учебная сборка Loftschool 2 | 3 | > Сборка работает на gulp версии 4.0. 4 | 5 | #### Для начала работы 6 | 7 | 1. ```clone this repo``` 8 | 2. ```cd path/to/...``` 9 | 3. ```npm install gulpjs/gulp-cli -g``` 10 | > Установка последней версии Gulp CLI tools глобально (подробнее - [GitHub](https://github.com/gulpjs/gulp/blob/4.0/docs/getting-started.md) ) 11 | 12 | 4. ```npm install``` 13 | 6. ```run gulp``` 14 | 15 | -------------------------------------------------------------------------------- /gulp/paths/tasks.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = [ 4 | './gulp/tasks/sass.js', 5 | './gulp/tasks/serve.js', 6 | './gulp/tasks/pug.js', 7 | './gulp/tasks/watch.js', 8 | './gulp/tasks/clean.js', 9 | './gulp/tasks/js.foundation.js', 10 | './gulp/tasks/css.foundation.js', 11 | './gulp/tasks/js.process.js', 12 | './gulp/tasks/js.lint.js', 13 | './gulp/tasks/copy.image.js', 14 | './gulp/tasks/sprite.svg.js' 15 | ]; 16 | 17 | -------------------------------------------------------------------------------- /gulp/tasks/pug.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function() { 4 | $.gulp.task('pug', function() { 5 | return $.gulp.src('./source/template/pages/*.pug') 6 | .pipe($.gp.pug({ pretty: true })) 7 | .on('error', $.gp.notify.onError(function(error) { 8 | return { 9 | title: 'Pug', 10 | message: error.message 11 | } 12 | })) 13 | .pipe($.gulp.dest($.config.root)); 14 | }); 15 | }; 16 | -------------------------------------------------------------------------------- /gulp/tasks/sass.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function() { 4 | $.gulp.task('sass', function() { 5 | return $.gulp.src('./source/style/app.scss') 6 | .pipe($.gp.sourcemaps.init()) 7 | .pipe($.gp.sass()).on('error', $.gp.notify.onError({ title: 'Style' })) 8 | .pipe($.gp.autoprefixer({ browsers: $.config.autoprefixerConfig })) 9 | .pipe($.gp.sourcemaps.write()) 10 | .pipe($.gulp.dest($.config.root + '/assets/css')) 11 | .pipe($.browserSync.stream()); 12 | }) 13 | }; 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Numerous always-ignore extensions 2 | *.bak 3 | *.diff 4 | *.err 5 | *.exe 6 | *.log 7 | *.orig 8 | *.rej 9 | *.sass-cache 10 | *.swo 11 | *.swp 12 | *.vi 13 | *~ 14 | 15 | # OS or Editor folders 16 | *.sublime-grunt.cache 17 | *.sublime-project 18 | *.sublime-workspace 19 | ._* 20 | .cache 21 | .DS_Store 22 | .project 23 | .settings 24 | .tmproj 25 | Thumbs.db 26 | 27 | # Folders to ignore 28 | .CVS 29 | .git 30 | .hg 31 | .idea 32 | .svn 33 | bower_components 34 | dist 35 | build 36 | 37 | # Node.JS 38 | node_modules 39 | npm-debug.log 40 | -------------------------------------------------------------------------------- /source/style/common/greating.scss: -------------------------------------------------------------------------------- 1 | .greating { 2 | overflow: hidden; 3 | position: relative; 4 | padding: 150px 20px 50px; 5 | background: #F44336; 6 | box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); 7 | 8 | &_text { 9 | font: 45px 'Arial', sans-serif; 10 | color: #fff; 11 | } 12 | 13 | &_picture { 14 | position: absolute; 15 | bottom: 0; 16 | right: 0; 17 | width: 100px; 18 | height: 114px; 19 | background: url('/assets/img/viking.png') no-repeat center; 20 | transform: translate3D(100%, 0, 0); 21 | transition: transform 0.5s; 22 | } 23 | } 24 | 25 | .greating_picture.m--show { 26 | transform: translate3D(0, 0, 0); 27 | } 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "loftschool-builder", 3 | "devDependencies": { 4 | "browser-sync": "~2.18.7", 5 | "del": "~3.0.0", 6 | "gulp": "github:gulpjs/gulp#4.0", 7 | "gulp-autoprefixer": "~4.0.0", 8 | "gulp-cheerio": "~0.6.2", 9 | "gulp-concat": "~2.6.1", 10 | "gulp-concat-css": "~2.3.0", 11 | "gulp-csso": "^3.0.0", 12 | "gulp-eslint": "~3.0.1", 13 | "gulp-load-plugins": "~1.5.0", 14 | "gulp-notify": "~3.0.0", 15 | "gulp-pug": "~3.3.0", 16 | "gulp-replace": "~0.5.4", 17 | "gulp-sass": "~3.1.0", 18 | "gulp-sourcemaps": "~2.6.0", 19 | "gulp-svg-sprite": "~1.3.1", 20 | "gulp-svgmin": "~1.2.2" 21 | }, 22 | "dependencies": { 23 | "normalize.css": "~7.0.0", 24 | "jquery": "~3.2.1" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /gulp/tasks/sprite.svg.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function() { 4 | $.gulp.task('sprite:svg', function() { 5 | return $.gulp.src('./source/sprite/*.svg') 6 | .pipe($.gp.svgmin({ 7 | js2svg: { 8 | pretty: true 9 | } 10 | })) 11 | .pipe($.gp.cheerio({ 12 | run: function ($) { 13 | $('[fill]').removeAttr('fill'); 14 | $('[stroke]').removeAttr('stroke'); 15 | $('[style]').removeAttr('style'); 16 | }, 17 | parserOptions: { xmlMode: true } 18 | })) 19 | .pipe($.gp.replace('>', '>')) 20 | .pipe($.gp.svgSprite({ 21 | mode: { 22 | symbol: { 23 | sprite: "../sprite.svg" 24 | } 25 | } 26 | })) 27 | .pipe($.gulp.dest($.config.root + '/assets/img')) 28 | }) 29 | }; 30 | -------------------------------------------------------------------------------- /source/template/_template.pug: -------------------------------------------------------------------------------- 1 | block variables 2 | 3 | doctype html 4 | html 5 | head 6 | meta(charset="utf-8") 7 | title #{title} 8 | meta(content="" name="author") 9 | meta(content="" name="description") 10 | meta(content="" name="keywords") 11 | meta(content="width=device-width, initial-scale=1" name="viewport") 12 | meta(content="ie=edge" http-equiv="x-ua-compatible") 13 | 14 | //- favicon block start 15 | //- favicon block end 16 | 17 | link(rel='stylesheet' href='/assets/css/foundation.css') 18 | link(rel='stylesheet' href='/assets/css/app.css') 19 | script(src='/assets/js/foundation.js' defer) 20 | script(src='/assets/js/app.js' defer) 21 | 22 | 25 | 26 | body 27 | block content 28 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | global.$ = { 4 | package: require('./package.json'), 5 | config: require('./gulp/config'), 6 | path: { 7 | task: require('./gulp/paths/tasks.js'), 8 | jsFoundation: require('./gulp/paths/js.foundation.js'), 9 | cssFoundation: require('./gulp/paths/css.foundation.js'), 10 | app: require('./gulp/paths/app.js') 11 | }, 12 | gulp: require('gulp'), 13 | del: require('del'), 14 | browserSync: require('browser-sync').create(), 15 | gp: require('gulp-load-plugins')() 16 | }; 17 | 18 | $.path.task.forEach(function(taskPath) { 19 | require(taskPath)(); 20 | }); 21 | 22 | $.gulp.task('default', $.gulp.series( 23 | 'clean', 24 | $.gulp.parallel( 25 | 'sass', 26 | 'pug', 27 | 'js:foundation', 28 | 'js:process', 29 | 'copy:image', 30 | 'css:foundation', 31 | 'sprite:svg' 32 | ), 33 | $.gulp.parallel( 34 | 'watch', 35 | 'serve' 36 | ) 37 | )); 38 | --------------------------------------------------------------------------------