From f0c42b6eea39eb885ac33cf328337215951f00b5 Mon Sep 17 00:00:00 2001 From: Steelcat Date: Sat, 14 Mar 2015 09:45:10 +0300 Subject: [PATCH] =?UTF-8?q?=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=D0=B8=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 3 +++ app/index.jade | 2 +- app/jade/_layout.jade | 8 ++++++++ app/scss/_vendor.scss | 2 ++ app/scss/main.scss | 14 ++++++++++++++ bower.json | 7 ++++++- gulpfile.js | 41 +++++++++++++++++++++++++++++++++++++++++ jade/_layout.jade | 0 package.json | 28 ++++++++++++++++++++++++++++ 9 files changed, 103 insertions(+), 2 deletions(-) create mode 100644 app/jade/_layout.jade create mode 100644 app/scss/_vendor.scss create mode 100644 gulpfile.js delete mode 100644 jade/_layout.jade create mode 100644 package.json diff --git a/.gitignore b/.gitignore index 9f11b75..7de5605 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,4 @@ .idea/ +node_modules/ +bower_components/ +dev/ diff --git a/app/index.jade b/app/index.jade index a633794..2acdfcb 100644 --- a/app/index.jade +++ b/app/index.jade @@ -1 +1 @@ -extends ../jade/_layout.jade \ No newline at end of file +extends jade/_layout.jade \ No newline at end of file diff --git a/app/jade/_layout.jade b/app/jade/_layout.jade new file mode 100644 index 0000000..65f9dd9 --- /dev/null +++ b/app/jade/_layout.jade @@ -0,0 +1,8 @@ +doctype html +html + head + link(rel="stylesheet" href="css/main.css") + body + .container + .left LEFT + .right RIGHT \ No newline at end of file diff --git a/app/scss/_vendor.scss b/app/scss/_vendor.scss new file mode 100644 index 0000000..e9f4cad --- /dev/null +++ b/app/scss/_vendor.scss @@ -0,0 +1,2 @@ +@import '../../bower_components/bourbon/app/assets/stylesheets/_bourbon.scss'; +@import '../../bower_components/neat/app/assets/stylesheets/_neat.scss'; \ No newline at end of file diff --git a/app/scss/main.scss b/app/scss/main.scss index e69de29..85adb91 100644 --- a/app/scss/main.scss +++ b/app/scss/main.scss @@ -0,0 +1,14 @@ +$visual-grid: true; +@import 'vendor'; +.container { + @include outer-container; +} +.left { + @include span-columns(4); + background: #333; +} + +.right { + @include span-columns(4); + background-color: #666; +} \ No newline at end of file diff --git a/bower.json b/bower.json index 1dc691e..8adfe8c 100644 --- a/bower.json +++ b/bower.json @@ -13,5 +13,10 @@ "test", "tests" ], - "dependencies": {} + "dependencies": { + "bourbon": "~4.2.1", + "neat": "~1.7.1", + "jquery": "~1.11.2" + }, + "devDependencies": {} } diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..1885c35 --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,41 @@ +// Подключение плагинов Gulp +var gulp = require('gulp'), + connect = require('gulp-connect'), + jade = require('gulp-jade'), + sass = require('gulp-sass'); + +// Задача по-умолчанию +gulp.task('default', ['server','jade','sass','watch']); + +// Запускаем сервер +gulp.task('server', ['watch'], function() { + connect.server({ + port: 9000, // порт сервера + root: 'dev', // корневая папка запуска сервера + livereload: true // автоматический перезапуск сервера + }) +}); + +// Компилируем Jade-шаблоны и копируем в папку dev +gulp.task('jade', function() { + gulp.src('./app/**/[^_]*.jade') + .pipe(jade({ + pretty: true + })) + .pipe(gulp.dest('./dev/')) + .pipe(connect.reload()); +}); + +// Компилируем SCSS-шаблоны и копируем в папку public +gulp.task('sass', function() { + return gulp.src(['./app/scss/main.scss']) + .pipe(sass()) + .on('error', function(err){ console.log(err.message); }) + .pipe(gulp.dest('./dev/css/')); +}); + +// Наблюдаем за изменением файлов и компилируем измененные файлы +gulp.task('watch', function() { + gulp.watch('./app/**/*.jade', ['jade']); + gulp.watch('./app/**/*.scss', ['sass']); +}); \ No newline at end of file diff --git a/jade/_layout.jade b/jade/_layout.jade deleted file mode 100644 index e69de29..0000000 diff --git a/package.json b/package.json new file mode 100644 index 0000000..9483f8f --- /dev/null +++ b/package.json @@ -0,0 +1,28 @@ +{ + "name": "loft-app", + "version": "1.0.0", + "description": "Простой шаблон для создания фронтенд-проекта с использованием методологии БЭМ и технологий SCSS, Jade и Gulp.", + "main": "index.js", + "dependencies": {}, + "devDependencies": { + "gulp": "^3.8.11", + "gulp-connect": "^2.2.0", + "gulp-jade": "^1.0.0", + "gulp-rigger": "^0.5.8", + "gulp-sass": "^1.3.3", + "gulp-watch": "^4.1.1" + }, + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "https://steelcat@github.com/steelcat/loft-app.git" + }, + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/steelcat/loft-app/issues" + }, + "homepage": "https://github.com/steelcat/loft-app" +}