const Gulp = require('gulp');
const Pug = require('gulp-pug');
const Fs = require('fs');
const dataFromFile = JSON.parse(Fs.readFileSync('./data.json'))
// Pug to HTML
Gulp.task('pug', () =>
Gulp.src('./*.pug')
.pipe(Pug({
pretty: true,
locals: dataFromFile || {}
}))
.pipe(Gulp.dest('./build'))
);{
"sections": {
"html": {
"name": "HTML",
"color": "#e44d26"
}
}
}.test= sections.html.color.test #{sections.html.color} 
handleSearchChange = (e, { value }) => {
this.setState({ filter: value });
};const results = data.filter(item => item.title.toLowerCase().includes(filter.toLowerCase()));import React, { Component } from 'react';
import { connect } from 'react-redux';
class UsersList extends Component {
componentDidMount() {
this.getUsers();
}
getUsers = () => {
let { dispatch } = this.props;
let arr = [];
fetch(`https://api.github.com/search/users?q=Donetsk`)
.then(res => { return res.json() })
.then(res => {
return res.items.map((result) => {
return result.login
});
}).then(logins=>{
const promises = logins.map((login)=> fetch(`https://api.github.com/users/${login}`).then(res=>res.json()));
return Promise.all(promises);
}).then((users)=>{
if(users){
dispatch({ type: 'GET_USERS', users });
}
})
}
render() {
let { users } = this.props;
return (
<div>
<h2>Users</h2>
{users.map((user) => {
return (
<div>
<p>{user.login}</p>
<p>{user.name}</p>
<p>{user.location}</p>
</div>
);
})}
</div>
)
}
}
const mapStateToProps = (state) => {
return {
users: state.users
}
}
export default connect(mapStateToProps)(UsersList);
import gulp from 'gulp'
import stylus from 'gulp-stylus'
import grid from 'smart-grid'
import del from 'del'
const settings = {
outputStyle: 'styl', /* less || scss || sass || styl */
columns: 12, /* number of grid columns */
offset: "30px", /* gutter width px || % */
container: {
maxWidth: '1200px', /* max-width оn very large screen */
fields: '30px' /* side fields */
},
breakPoints: {
lg: {
'width': '1100px', /* -> @media (max-width: 1100px) */
'fields': '30px' /* side fields */
},
md: {
'width': '960px',
'fields': '15px'
},
sm: {
'width': '780px',
'fields': '15px'
},
xs: {
'width': '560px',
'fields': '15px'
}
}
};
const paths = {
styl: {
vendor: './vendor/',
src: './src/**/*.styl',
dest: './dest'
}
}
const clean = () => del([ 'dest' ])
export { clean }
export function init(cb){
grid(paths.styl.vendor, settings)
cb()
}
export function styl_build(){
return gulp.src(paths.styl.src)
.pipe(stylus({
paths : [
'src',
'vendor'
]
}))
.pipe(gulp.dest(paths.styl.dest))
}
const build = gulp.series(
clean,
init,
styl_build
)
export { build }
export default build{
"name": "template",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"gulp": "gulp"
},
"author": "Vsnegovik",
"license": "ISC",
"devDependencies": {
"babel-preset-es2015": "^6.22.0",
"babel-register": "^6.22.0",
"gulp": "github:gulpjs/gulp#4.0",
"gulp-stylus": "^2.6.0",
"smart-grid": "^1.0.3",
"del": "^2.2.2"
}
}{
"presets": [ "es2015" ]
}@import smart-grid
.items
row-flex()
justify-content-md(center)
.item
col()
col-3()
col-md-5()
col-xs-10()
Как вы, уважаемые коллеги, объясняете своим заказчикам, что проект, созданный командой разработчиков (UX-дизайнер, верстальщик, программист и т.д.) будет заведомо лучшим выбором, нежели, чем тот, который собран на коленках школьником вечером после уроков быстро/сердито/дешево?