From bef01c90ade1c9e2470483d50b561ceb16e23e68 Mon Sep 17 00:00:00 2001 From: Bartek Igielski Date: Thu, 12 May 2016 15:45:12 +0200 Subject: [PATCH 1/5] Project dir added to global config. #20 Added task to create symlink to tools at root dir. --- gulpfile.js | 1 + tasks/symlink.js | 15 +++++++++++++++ 2 files changed, 16 insertions(+) create mode 100644 tasks/symlink.js diff --git a/gulpfile.js b/gulpfile.js index db6e5e95..0f3856da 100755 --- a/gulpfile.js +++ b/gulpfile.js @@ -26,6 +26,7 @@ var configs = { 'browserSync': require('./configs/browser-sync.json'), 'csslint' : require('./configs/css-lint.json'), 'eslint' : require('./configs/eslint.json'), + 'projectPath': require('fs').realpathSync('../../../'), 'themes' : require('./configs/themes.json') }, tasks = require('gulp-task-loader')({ diff --git a/tasks/symlink.js b/tasks/symlink.js new file mode 100644 index 00000000..995d394e --- /dev/null +++ b/tasks/symlink.js @@ -0,0 +1,15 @@ +module.exports = function() { + // global vars + var gulp = this.gulp, + plugins = this.opts.plugins, + configs = this.opts.configs; + + // local plugins + var fs = require('fs'); + + fs.symlink('./', '../../../tools', 'dir', () => { + plugins.util.log( + plugins.util.colors.green('Symlink created. Now you can use Frontools from "tools" directory at root of your project.') + ); + }); +}; From 9b47b7d51089043b3bdab3a4955ea82f04fff860 Mon Sep 17 00:00:00 2001 From: Bartek Igielski Date: Thu, 12 May 2016 18:16:49 +0200 Subject: [PATCH 2/5] Realted to #20. Paths changed from relative to absolute. Some refactoring. --- composer.json | 10 +--- configs/.eslintrc => config/.eslintrc.sample | 0 .../browser-sync.json.sample | 0 config/eslint.json.sample | 3 ++ config/themes.json.sample | 53 +++++++++++++++++++ configs/css-lint.json | 32 ----------- configs/eslint.json | 3 -- configs/themes.json.example | 53 ------------------- gulpfile.js | 46 ++++++---------- helpers/config-loader.js | 17 ++++++ helpers/css-lint-custom-reporter.js | 27 ---------- helpers/less.js | 14 ++--- helpers/scss.js | 12 +++-- package.json | 1 - readme.md | 16 ++++-- tasks/browser-sync.js | 10 ++-- tasks/clean.js | 2 +- tasks/default.js | 4 +- tasks/deploy.js | 17 +++--- tasks/dev.js | 2 +- tasks/docs.js | 18 +++---- tasks/eslint.js | 37 +++++++++---- tasks/release.js | 2 +- tasks/styles.js | 8 +-- tasks/symlink.js | 4 +- tasks/watch.js | 25 +++++---- 26 files changed, 191 insertions(+), 225 deletions(-) rename configs/.eslintrc => config/.eslintrc.sample (100%) rename configs/browser-sync.json => config/browser-sync.json.sample (100%) create mode 100755 config/eslint.json.sample create mode 100755 config/themes.json.sample delete mode 100755 configs/css-lint.json delete mode 100755 configs/eslint.json delete mode 100755 configs/themes.json.example create mode 100644 helpers/config-loader.js delete mode 100755 helpers/css-lint-custom-reporter.js diff --git a/composer.json b/composer.json index f67b3ae7..5f311ecc 100644 --- a/composer.json +++ b/composer.json @@ -3,13 +3,5 @@ "description": "Set of front-end tools for Magento 2, based on Gulp.js", "version": "0.7.2", "license": "MIT", - "type": "magento2-component", - "extra": { - "map": [ - [ - "*", - "tools" - ] - ] - } + "type": "magento2-component" } diff --git a/configs/.eslintrc b/config/.eslintrc.sample similarity index 100% rename from configs/.eslintrc rename to config/.eslintrc.sample diff --git a/configs/browser-sync.json b/config/browser-sync.json.sample similarity index 100% rename from configs/browser-sync.json rename to config/browser-sync.json.sample diff --git a/config/eslint.json.sample b/config/eslint.json.sample new file mode 100755 index 00000000..fded55b1 --- /dev/null +++ b/config/eslint.json.sample @@ -0,0 +1,3 @@ +{ + "configFile": "./config/.eslintrc" +} diff --git a/config/themes.json.sample b/config/themes.json.sample new file mode 100755 index 00000000..fb87147d --- /dev/null +++ b/config/themes.json.sample @@ -0,0 +1,53 @@ +{ + "backend": { + "src" : "app/design/adminhtml/Magento/backend", + "dest" : "pub/static/adminhtml/Magento/backend", + "locale" : ["en_US"], + "lang" : "less", + "default": true, + "area" : "adminhtml", + "vendor" : "Magento", + "name" : "backend", + "files" : [ + "css/styles-old", + "css/styles" + ] + }, + "blank": { + "src" : "app/design/frontend/Magento/blank", + "dest" : "pub/static/frontend/Magento/blank", + "locale" : ["en_US"], + "lang" : "less", + "default": true, + "area" : "frontend", + "vendor" : "Magento", + "name" : "blank", + "files" : [ + "css/styles-m", + "css/styles-l", + "css/email", + "css/email-inline" + ] + }, + "luma": { + "src" : "app/design/frontend/Magento/luma", + "dest" : "pub/static/frontend/Magento/luma", + "locale" : ["en_US"], + "lang" : "less", + "default": true, + "area" : "frontend", + "vendor" : "Magento", + "name" : "luma", + "files" : [ + "css/styles-m", + "css/styles-l" + ] + }, + "sass-blank": { + "src" : "vendor/snowdog/theme-blank-sass", + "dest" : "pub/static/frontend/snowdog/blank", + "locale" : ["en_US", "pl_PL"], + "lang" : "scss", + "postcss": ["plugins.autoprefixer()"] + } +} diff --git a/configs/css-lint.json b/configs/css-lint.json deleted file mode 100755 index adeb5627..00000000 --- a/configs/css-lint.json +++ /dev/null @@ -1,32 +0,0 @@ -{ - "adjoining-classes" : false, - "box-model" : false, - "box-sizing" : false, - "compatible-vendor-prefixes" : false, - "empty-rules" : false, - "display-property-grouping" : false, - "duplicate-background-images": false, - "duplicate-properties" : false, - "fallback-colors" : false, - "floats" : false, - "font-faces" : false, - "font-sizes" : false, - "gradients" : false, - "ids" : false, - "import" : false, - "important" : false, - "known-properties" : false, - "outline-none" : false, - "overqualified-elements" : false, - "qualified-headings" : false, - "regex-selectors" : false, - "shorthand" : false, - "star-property-hack" : false, - "text-indent" : false, - "underscore-property-hack" : false, - "unique-headings" : false, - "universal-selector" : false, - "unqualified-attributes" : false, - "vendor-prefix" : false, - "zero-units" : false -} diff --git a/configs/eslint.json b/configs/eslint.json deleted file mode 100755 index c132dd5c..00000000 --- a/configs/eslint.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "configFile": "./configs/.eslintrc" -} diff --git a/configs/themes.json.example b/configs/themes.json.example deleted file mode 100755 index e25e1c33..00000000 --- a/configs/themes.json.example +++ /dev/null @@ -1,53 +0,0 @@ -{ - "backend": { - "src": "../app/design/adminhtml/Magento/backend", - "dest": "../pub/static/adminhtml/Magento/backend", - "locale": ["en_US"], - "lang": "less", - "default": true, - "area": "adminhtml", - "vendor": "Magento", - "name": "backend", - "files": [ - "css/styles-old", - "css/styles" - ] - }, - "blank": { - "src": "../app/design/frontend/Magento/blank", - "dest": "../pub/static/frontend/Magento/blank", - "locale": ["en_US", "pl_PL"], - "lang": "less", - "default": true, - "area": "frontend", - "vendor": "Magento", - "name": "blank", - "files": [ - "css/styles-m", - "css/styles-l", - "css/email", - "css/email-inline" - ] - }, - "luma": { - "src": "../app/design/frontend/Magento/luma", - "dest": "../pub/static/frontend/Magento/luma", - "locale": ["en_US"], - "lang": "less", - "default": true, - "area": "frontend", - "vendor": "Magento", - "name": "luma", - "files": [ - "css/styles-m", - "css/styles-l" - ] - }, - "demo": { - "src": "../vendor/snowdog/theme-frontend-demo", - "dest": "../pub/static/frontend/snowdog/demo", - "locale": ["en_US", "pl_PL", "ru_RU"], - "lang": "scss", - "postcss": ["plugins.autoprefixer()"] - } -} diff --git a/gulpfile.js b/gulpfile.js index 0f3856da..bfef4dfa 100755 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,4 +1,6 @@ +// plugins / functions / modules var gulp = require('gulp'), + fs = require('fs'), plugins = require('gulp-load-plugins')({ pattern: ['*', '!gulp', '!gulp-load-plugins'], rename: { @@ -8,43 +10,27 @@ var gulp = require('gulp'), } }); -// Check if user create themes configuration -if (!plugins.globby.sync('./configs/themes.json').length) { - plugins.util.log( - plugins.util.colors.red('\n========================================= \n') - + plugins.util.colors.yellow('You have to create ') - + plugins.util.colors.blue('configs/themes.json') - + plugins.util.colors.red('\n=========================================') - ); - throw new plugins.util.PluginError({ - plugin: 'configs', - message: 'You have to create configs/themes.json' - }); -} - -var configs = { - 'browserSync': require('./configs/browser-sync.json'), - 'csslint' : require('./configs/css-lint.json'), - 'eslint' : require('./configs/eslint.json'), - 'projectPath': require('fs').realpathSync('../../../'), - 'themes' : require('./configs/themes.json') - }, - tasks = require('gulp-task-loader')({ - dir : 'tasks', - plugins: plugins, - configs: configs - }); +// global configuration +var config = { + 'themes' : require('./helpers/config-loader')('themes.json', plugins), + 'projectPath': fs.realpathSync('../../../') + '/' + }; -plugins.browserSync.create(); +// tasks loading / creating +require('gulp-task-loader')({ + dir : 'tasks', + plugins: plugins, + configs: config +}); // define task for each theme, locale, lang, processing type etc. // gulp can't run same task in parallel, so we need different names -Object.keys(configs.themes).forEach(name => { - var theme = configs.themes[name]; +Object.keys(config.themes).forEach(name => { + var theme = config.themes[name]; theme.locale.forEach(locale => { gulp.task( theme.lang + ':' + name + ':' + locale, - require('./helpers/' + theme.lang)(gulp, plugins, configs, name, locale) + require('./helpers/' + theme.lang)(gulp, plugins, config, name, locale) ); }); }); diff --git a/helpers/config-loader.js b/helpers/config-loader.js new file mode 100644 index 00000000..eeda0ea5 --- /dev/null +++ b/helpers/config-loader.js @@ -0,0 +1,17 @@ +module.exports = function(file, plugins) { + if (plugins.globby.sync('./config/' + file).length) { + return require('../config/' + file); + } + else { + plugins.util.log( + plugins.util.colors.red('\n========================================= \n') + + plugins.util.colors.yellow('You have to create ') + + plugins.util.colors.blue('config/' + file) + + plugins.util.colors.red('\n=========================================') + ); + throw new plugins.util.PluginError({ + plugin: 'config', + message: 'You have to create config/' + file + }); + } +} diff --git a/helpers/css-lint-custom-reporter.js b/helpers/css-lint-custom-reporter.js deleted file mode 100755 index ea1003d4..00000000 --- a/helpers/css-lint-custom-reporter.js +++ /dev/null @@ -1,27 +0,0 @@ -module.exports = function(gulp, plugins, configs) { - function customReporter(file) { - plugins.util.log( - plugins.util.colors.cyan(file.csslint.errorCount) - + ' errors in ' + plugins.util.colors.magenta(file.path) - ); - - file.csslint.results.forEach(function(result) { - if (result.error.type === 'warning') { - plugins.util.log(plugins.util.colors.yellow.bold('[Warining]') - + plugins.util.colors.green(' Line: ' + result.error.line) - + plugins.util.colors.cyan(' Column: ' + result.error.col) + ' ' - + plugins.util.colors.magenta(result.error.message) + ' ' - + plugins.util.colors.gray(result.error.rule.desc) + ' ' - + plugins.util.colors.red('Browsers: ' + result.error.rule.browsers)); - } - else { - plugins.util.log(plugins.util.colors.red.bold('[' + result.error.type + ']') - + plugins.util.colors.green(' Line: ' + result.error.line) - + plugins.util.colors.cyan(' Column: ' + result.error.col) + ' ' - + plugins.util.colors.magenta(result.error.message) + ' ' - + plugins.util.colors.gray(result.error.rule.desc) + ' ' - + plugins.util.colors.red('Browsers: ' + result.error.rule.browsers)); - } - }); - } -}; diff --git a/helpers/less.js b/helpers/less.js index b63e6ac8..77931734 100644 --- a/helpers/less.js +++ b/helpers/less.js @@ -1,9 +1,9 @@ -module.exports = function(gulp, plugins, configs, name, locale, file) { +module.exports = function(gulp, plugins, config, name, locale, file) { return () => { // local vars - var theme = configs.themes[name], - src = theme.dest + '/' + locale, - dest = theme.dest + '/' + locale + '/css', + var theme = config.themes[name], + src = config.projectPath + theme.dest + '/' + locale, + dest = config.projectPath + theme.dest + '/' + locale + '/css', maps = plugins.util.env.maps || false, production = plugins.util.env.prod || false, lessFiles = file || []; @@ -12,9 +12,9 @@ module.exports = function(gulp, plugins, configs, name, locale, file) { // can't figure out what files to process when path is like "theme/**/*.less" if (!lessFiles.length) { var files = plugins.globby.sync([ - src + '/**/*.less', - '!' + src + '/**/_*.less', - '!' + src + '/node_modules/**/*.less' + config.projectPath + src + '/**/*.less', + '!' + config.projectPath + src + '/**/_*.less', + '!' + config.projectPath + src + '/node_modules/**/*.less' ]); files.forEach(file => lessFiles.push(file)); diff --git a/helpers/scss.js b/helpers/scss.js index f27a2a7b..fb31a2d7 100644 --- a/helpers/scss.js +++ b/helpers/scss.js @@ -1,14 +1,16 @@ -module.exports = function(gulp, plugins, configs, name, locale, file) { +module.exports = function(gulp, plugins, config, name, locale, file) { return () => { // local vars - var theme = configs.themes[name], - src = file || theme.src + '/**/*.scss', - dest = theme.dest + '/' + locale, + var theme = config.themes[name], + src = file || config.projectPath + theme.src + '/**/*.scss', + dest = config.projectPath + theme.dest + '/' + locale, maps = plugins.util.env.maps || false, production = plugins.util.env.prod || false, postcss = theme.postcss || false; - return gulp.src([src, '!' + theme.src + '/node_modules/**/*.scss'], {base: theme.src + '/web'}) + return gulp.src([ + src, '!' + config.projectPath + theme.src + '/node_modules/**/*.scss' + ], {base: config.projectPath + theme.src + '/web'}) .pipe(plugins.plumber({ errorHandler: plugins.notify.onError("Error: <%= error.message %>") })) .pipe(plugins.if(maps, plugins.sourcemaps.init())) .pipe(plugins.sass()) diff --git a/package.json b/package.json index 95761551..c23a5dfc 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,6 @@ "url": "https://github.com/SnowdogApps/magento2-frontools" }, "license": "MIT", - "engines": "node >= 4.2.6", "devDependencies": { "autoprefixer": "6.3.6", "browser-sync": "2.12.2", diff --git a/readme.md b/readme.md index 48e9b6ab..5781468a 100644 --- a/readme.md +++ b/readme.md @@ -3,11 +3,17 @@ Set of front-end tools for Magento 2, based on Gulp.js --- +## Requirements +* `node >= 4.0.0` - heavily recommend using current LTS (v4 branch), not a latest version. +* Gulp CLI global package- `npm install gulp-cli -g` +* Magento 2 project and composer :) + ## How to start? -* You need to have `node >= 4.2.6` - current LTS -* `composer require snowdog/frontools` -* `cd tools` and run `npm install` -* Use one of listed bellow task +* Run `composer require snowdog/frontools` +* Go to package directory (probably `vendor/snowdog/frontools`) and run `npm install` +* If you are lazy... I know you are :) Run `gulp symlink` this will create symlink to this dir in project root. +* Go to project root and then `cd tools` +* Use one of tasks listed bellow --- @@ -35,7 +41,7 @@ Set of front-end tools for Magento 2, based on Gulp.js --- -## `configs/themes.json` structure +## `config/themes.json` structure - `src` - full path to theme - `dest` - full path to `pub/static/[theme]` - `locale` - array of available locales diff --git a/tasks/browser-sync.js b/tasks/browser-sync.js index 88c66569..08c88e4c 100755 --- a/tasks/browser-sync.js +++ b/tasks/browser-sync.js @@ -2,8 +2,12 @@ module.exports = function() { // global vars var gulp = this.gulp, plugins = this.opts.plugins, - configs = this.opts.configs; + config = this.opts.configs; - // Gulp task body - plugins.browserSync(configs.browserSync); + // Task body + + config.browserSync = require('../helpers/config-loader')('browser-sync.json', plugins); + + plugins.browserSync.create(); + plugins.browserSync(config.browserSync); }; diff --git a/tasks/clean.js b/tasks/clean.js index 23dfcd16..899d3fdf 100644 --- a/tasks/clean.js +++ b/tasks/clean.js @@ -2,7 +2,7 @@ module.exports = function() { // global vars var gulp = this.gulp, plugins = this.opts.plugins, - configs = this.opts.configs; + config = this.opts.configs; return gulp.src(['../pub/static/*/', '!../pub/static/.htaccess'], {read: false}) .pipe(plugins.rimraf({force: true})); diff --git a/tasks/default.js b/tasks/default.js index c6b9a5ac..6fd39dc1 100644 --- a/tasks/default.js +++ b/tasks/default.js @@ -2,9 +2,9 @@ module.exports = function() { // global vars var gulp = this.gulp, plugins = this.opts.plugins, - configs = this.opts.configs; + config = this.opts.configs; - // local plugins and configs + // local plugins and config const fs = require('fs'); plugins.marked.setOptions({ diff --git a/tasks/deploy.js b/tasks/deploy.js index 90712eda..ee242442 100644 --- a/tasks/deploy.js +++ b/tasks/deploy.js @@ -2,17 +2,16 @@ module.exports = function() { // global vars var gulp = this.gulp, plugins = this.opts.plugins, - configs = this.opts.configs; + config = this.opts.configs; - // local plugins and configs + // local plugins and config const execSync = require('child_process').execSync; // local vars var themeName = plugins.util.env.theme || false, - themes = themeName ? [themeName] : Object.keys(configs.themes); + themes = themeName ? [themeName] : Object.keys(config.themes); - - if (!!configs.themes[themeName] && !configs.themes[themeName].default) { + if (!!config.themes[themeName] && !config.themes[themeName].default) { plugins.util.log( plugins.util.colors.red.bold('[Warining] ') + plugins.util.colors.yellow('This tasks is designed only for LESS themes which use ') @@ -21,15 +20,15 @@ module.exports = function() { } else { themes.forEach(name => { - configs.themes[name].locale.forEach(locale => { - if (configs.themes[name].default) { - var theme = configs.themes[name]; + config.themes[name].locale.forEach(locale => { + if (config.themes[name].default) { + var theme = config.themes[name]; theme.locale.forEach(locale => { // if it's default theme, create symlinks to styles files via Magento CLI // porting "@magento-import" to node.js might be time consumig // and it's not so usefull for front-end devs // execSync to keep process synchronous and wait till CLI do the job - execSync('../bin/magento dev:source-theme:deploy' + execSync(config.projectPath + 'bin/magento dev:source-theme:deploy' + ' --type=' + theme.lang + ' --locale=' + locale + ' --area=' + theme.area diff --git a/tasks/dev.js b/tasks/dev.js index c6610029..f0eead10 100644 --- a/tasks/dev.js +++ b/tasks/dev.js @@ -2,7 +2,7 @@ module.exports = function() { // global vars var gulp = this.gulp, plugins = this.opts.plugins, - configs = this.opts.configs; + config = this.opts.configs; plugins.runSequence('browser-sync', 'watch'); }; diff --git a/tasks/docs.js b/tasks/docs.js index 1e93bf16..f0cc5b7e 100644 --- a/tasks/docs.js +++ b/tasks/docs.js @@ -2,21 +2,21 @@ module.exports = function() { // global vars var gulp = this.gulp, plugins = this.opts.plugins, - configs = this.opts.configs; + config = this.opts.configs; - Object.keys(configs.themes).forEach(name => { - var theme = configs.themes[name]; - if (theme.default && theme.area === 'frontend') { + Object.keys(config.themes).forEach(name => { + var theme = config.themes[name]; + if (theme.default && theme.area === 'frontend' && theme.lang == 'less') { theme.locale.forEach(locale => { - gulp.src('../lib/web/css/docs/**/*') - .pipe(gulp.dest(theme.dest + '/' + locale + '/css/docs')); + gulp.src(config.projectPath + '/lib/web/css/docs/**/*') + .pipe(gulp.dest(config.projectPath + theme.dest + '/' + locale + '/css/docs')); gulp.src([ - theme.dest + '/' + locale + '/css/docs/**/*.less', - '!' + theme.dest + '/' + locale + '/css/docs/**/_*.less' + config.projectPath + theme.dest + '/' + locale + '/css/docs/**/*.less', + '!' + config.projectPath + theme.dest + '/' + locale + '/css/docs/**/_*.less' ]) .pipe(plugins.less()) - .pipe(gulp.dest(theme.dest + '/' + locale + '/css/docs')); + .pipe(gulp.dest(config.projectPath + theme.dest + '/' + locale + '/css/docs')); }) } }); diff --git a/tasks/eslint.js b/tasks/eslint.js index d113c3c9..5220b8d0 100755 --- a/tasks/eslint.js +++ b/tasks/eslint.js @@ -2,21 +2,38 @@ module.exports = function() { // global vars var gulp = this.gulp, plugins = this.opts.plugins, - configs = this.opts.configs; + config = this.opts.configs; + + // Load eslint config + config.eslint = require('../helpers/config-loader')('eslint.json', plugins); // Gulp task body if (plugins.util.env.file) { plugins.util.log( - plugins.util.colors.red.bold('Gulp is looking for files. Please wait till "eslint" task end.') + plugins.util.colors.red.bold('Gulp is looking for files. Please wait...') ); - - gulp.watch('../**/' + plugins.util.env.file + '.js', function(event) { - gulp.src(event.path) - .pipe(plugins.plumber({ errorHandler: plugins.notify.onError("ESLint found problems") })) - .pipe(plugins.logger({ display: 'name' })) - .pipe(plugins.eslint(configs.eslint)) - .pipe(plugins.eslint.format()); - }); + var files = plugins.globby.sync([ + config.projectPath + '/**/' + plugins.util.env.file + '.js', + '!' + config.projectPath + '/**/node_modules/**' + ]); + if (files.length) { + plugins.util.log( + plugins.util.colors.green(files.length + ' files found. Watcher initialized.') + ); + gulp.watch(files, function(event) { + gulp.src(event.path) + .pipe(plugins.plumber({ errorHandler: plugins.notify.onError("ESLint found problems") })) + .pipe(plugins.logger({ display: 'name' })) + .pipe(plugins.eslint(config.eslint)) + .pipe(plugins.eslint.format()); + }); + } + else { + plugins.util.log( + plugins.util.colors.red.bold('ERROR: File not found.') + ); + return false; + } } else { plugins.util.log( diff --git a/tasks/release.js b/tasks/release.js index 8aef7f57..71001807 100644 --- a/tasks/release.js +++ b/tasks/release.js @@ -2,7 +2,7 @@ module.exports = function() { // global vars var gulp = this.gulp, plugins = this.opts.plugins, - configs = this.opts.configs; + config = this.opts.configs; plugins.util.env.prod = true; plugins.runSequence(['clean', 'deploy', 'styles']); diff --git a/tasks/styles.js b/tasks/styles.js index 6d0ef914..184b3c58 100644 --- a/tasks/styles.js +++ b/tasks/styles.js @@ -2,15 +2,15 @@ module.exports = function() { // global vars var gulp = this.gulp, plugins = this.opts.plugins, - configs = this.opts.configs; + config = this.opts.configs; // local vars var themeName = plugins.util.env.theme || false, - themes = themeName ? [themeName] : Object.keys(configs.themes); + themes = themeName ? [themeName] : Object.keys(config.themes); themes.forEach(name => { - configs.themes[name].locale.forEach(locale => { - plugins.runSequence(configs.themes[name].lang + ':' + name + ':' + locale); + config.themes[name].locale.forEach(locale => { + plugins.runSequence(config.themes[name].lang + ':' + name + ':' + locale); }); }); }; diff --git a/tasks/symlink.js b/tasks/symlink.js index 995d394e..1e5bacaf 100644 --- a/tasks/symlink.js +++ b/tasks/symlink.js @@ -2,12 +2,12 @@ module.exports = function() { // global vars var gulp = this.gulp, plugins = this.opts.plugins, - configs = this.opts.configs; + config = this.opts.configs; // local plugins var fs = require('fs'); - fs.symlink('./', '../../../tools', 'dir', () => { + fs.symlink('./', config.projectPath + '/tools', 'dir', () => { plugins.util.log( plugins.util.colors.green('Symlink created. Now you can use Frontools from "tools" directory at root of your project.') ); diff --git a/tasks/watch.js b/tasks/watch.js index e618b614..95c2f3c9 100755 --- a/tasks/watch.js +++ b/tasks/watch.js @@ -2,35 +2,38 @@ module.exports = function() { // global vars var gulp = this.gulp, plugins = this.opts.plugins, - configs = this.opts.configs; + config = this.opts.configs; // local vars var themeName = plugins.util.env.theme || false, - themes = themeName ? [themeName] : Object.keys(configs.themes); + themes = themeName ? [themeName] : Object.keys(config.themes); themes.forEach(name => { - var theme = configs.themes[name]; + var theme = config.themes[name]; theme.locale.forEach(locale => { var themePath = theme.default ? theme.dest + '/' + locale : theme.src, files = plugins.globby.sync( [ - themePath + '/**/*.' + theme.lang, - '!' + themePath + '/**/_*.' + theme.lang + config.projectPath + themePath + '/**/*.' + theme.lang, + '!' + config.projectPath + themePath + '/**/_*.' + theme.lang ] ); + if (theme.lang === 'less') { + var dependencyTreeBuilder = require('../helpers/dependency-tree-builder'); files.forEach(file => { - var dependencyTree = require('../helpers/dependency-tree-builder')(theme, file), - compiler = require('../helpers/' + theme.lang)(gulp, plugins, configs, name, locale, file); - - gulp.watch(dependencyTree, () => { + var compiler = require('../helpers/' + theme.lang)(gulp, plugins, config, name, locale, file); + gulp.watch(dependencyTreeBuilder(theme, file), () => { compiler(); }); }); } else { - var compiler = require('../helpers/' + theme.lang)(gulp, plugins, configs, name, locale, themePath + '/**/*.' + theme.lang); - gulp.watch([themePath + '/**/*.' + theme.lang, '!' + themePath + '/node_modules/**'], () => { + var compiler = require('../helpers/' + theme.lang)( + gulp, plugins, config, name, locale, + config.projectPath + themePath + '/**/*.' + theme.lang + ); + gulp.watch(files, () => { compiler(); }); } From 46fe2254ff36623e5df4bedd891971c9c16e2fd0 Mon Sep 17 00:00:00 2001 From: Bartek Igielski Date: Thu, 12 May 2016 19:16:01 +0200 Subject: [PATCH 3/5] Updated readme. --- readme.md | 30 +++++++++++------------------- 1 file changed, 11 insertions(+), 19 deletions(-) diff --git a/readme.md b/readme.md index 5781468a..eac61ac3 100644 --- a/readme.md +++ b/readme.md @@ -5,13 +5,13 @@ Set of front-end tools for Magento 2, based on Gulp.js ## Requirements * `node >= 4.0.0` - heavily recommend using current LTS (v4 branch), not a latest version. -* Gulp CLI global package- `npm install gulp-cli -g` +* Gulp CLI global package - `npm install gulp-cli -g` * Magento 2 project and composer :) ## How to start? * Run `composer require snowdog/frontools` * Go to package directory (probably `vendor/snowdog/frontools`) and run `npm install` -* If you are lazy... I know you are :) Run `gulp symlink` this will create symlink to this dir in project root. +* If you are lazy... (I know you are :wink: ) Run `gulp symlink` this will create symlink to this dir in project root. * Go to project root and then `cd tools` * Use one of tasks listed bellow @@ -27,13 +27,14 @@ Set of front-end tools for Magento 2, based on Gulp.js * `--theme name` - Process single theme * `--maps` - Toggles source maps generation * `--prod` - Production output - minifies styles +* `eslint` - Watch and run eslint on specified JS file + * `--file fileName` - You have to specify what file you want to lint +* `release` - Clean `pub/static`, deploy all necessary files and compiles everything with `--prod` flag. Makes code production ready. * `styles` - Use it to manually trigger styles processing pipeline * `--theme name` - Process single theme * `--maps` - Toggles source maps generation * `--prod` - Production output - minifies styles -* `eslint` - Watch and run eslint on specified JS file - * `--file fileName` - You have to specify what file you want to lint -* `release` - Clean `pub/static`, deploy all necessary files and compiles everything with `--prod` flag. Makes code production ready. +* `symlink` - Create symlink to tools directory in project root * `watch` - Watch for styles changes and run processing task * `--theme name` - Process single theme * `--maps` - Toggles source maps generation @@ -42,21 +43,12 @@ Set of front-end tools for Magento 2, based on Gulp.js --- ## `config/themes.json` structure +First of all check `config/themes.json.sample` - `src` - full path to theme - `dest` - full path to `pub/static/[theme]` - `locale` - array of available locales -- `lang` - define styles lang want to use for processing i.e. `less` or `scss`. Should be same as files extension. -- `default` - (optional) if your theme use default PHP based processing via `bin/magento dev:source-theme:deploy` set this to `true`. -- `area`, `vendor`, `name` - (optional) self-descriptive, only for `default` themes -- `files` - (optional) Array of LESS files to process +- `lang` - define styles lang want to use for processing. Out of the box tools support only `less` or `scss`. Should be same as files extension. +- `default` - (required for LESS themes) if your theme use default PHP based processing via `bin/magento dev:source-theme:deploy` set this to `true`. +- `area`, `vendor`, `name` - (required for LESS themes) self-descriptive +- `files` - (required for LESS themes) Array of LESS files to process - `postcss` - (optional) PostCSS plugins config. This have to be an array. - ---- - -## Tasks "to do" list -1. `assets` - Probably just wrapper to `bin/magento setup:static-content:deploy` - I create "lighter" version of this tool, without styles processing, and works fast enough for production deployment purposes. -2. `css-lint` - Lining CSS files - * `--full` - Prints full CSSLint output (without any config) -3. `scripts` - Lint and build JS files -4. `uglify` - Uglify JS files -5. `requirejs` - I have no idea how processing of JS in M2 works, but I'm pretty sure that some automation will be needed :) From 6cd3fe2dcda1d9e2de29c50ac2624b35fa8a0aa6 Mon Sep 17 00:00:00 2001 From: Bartek Igielski Date: Thu, 12 May 2016 19:41:13 +0200 Subject: [PATCH 4/5] Updated dependencies. Updated readme. --- package.json | 14 +++++++------- readme.md | 4 ++-- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index c23a5dfc..6e7a9ca1 100644 --- a/package.json +++ b/package.json @@ -11,22 +11,22 @@ "license": "MIT", "devDependencies": { "autoprefixer": "6.3.6", - "browser-sync": "2.12.2", + "browser-sync": "2.12.8", "cssnano": "3.5.2", "globby": "4.0.0", "gulp": "3.9.1", "gulp-concat": "2.6.0", "gulp-csslint": "0.3.0", - "gulp-eslint": "1.1.1", - "gulp-if": "2.0.0", - "gulp-less": "3.0.5", - "gulp-load-plugins": "1.2.0", + "gulp-eslint": "2.0.0", + "gulp-if": "2.0.1", + "gulp-less": "3.1.0", + "gulp-load-plugins": "1.2.2", "gulp-logger": "0.0.2", "gulp-notify": "2.2.0", "gulp-plumber": "1.1.0", - "gulp-postcss": "6.1.0", + "gulp-postcss": "6.1.1", "gulp-rimraf": "0.2.0", - "gulp-sass": "2.2.0", + "gulp-sass": "2.3.1", "gulp-sourcemaps": "1.6.0", "gulp-task-loader": "1.4.2", "gulp-uglify": "1.5.3", diff --git a/readme.md b/readme.md index eac61ac3..0b2959db 100644 --- a/readme.md +++ b/readme.md @@ -6,7 +6,7 @@ Set of front-end tools for Magento 2, based on Gulp.js ## Requirements * `node >= 4.0.0` - heavily recommend using current LTS (v4 branch), not a latest version. * Gulp CLI global package - `npm install gulp-cli -g` -* Magento 2 project and composer :) +* Magento 2 project :smile: ## How to start? * Run `composer require snowdog/frontools` @@ -47,7 +47,7 @@ First of all check `config/themes.json.sample` - `src` - full path to theme - `dest` - full path to `pub/static/[theme]` - `locale` - array of available locales -- `lang` - define styles lang want to use for processing. Out of the box tools support only `less` or `scss`. Should be same as files extension. +- `lang` - define styles lang want to use for processing, should be same as files extension. Out of the box Frontools supports only `less` and `scss`. - `default` - (required for LESS themes) if your theme use default PHP based processing via `bin/magento dev:source-theme:deploy` set this to `true`. - `area`, `vendor`, `name` - (required for LESS themes) self-descriptive - `files` - (required for LESS themes) Array of LESS files to process From 0059614e65884508724c790952f33dcac6552a35 Mon Sep 17 00:00:00 2001 From: Bartek Igielski Date: Thu, 12 May 2016 19:43:04 +0200 Subject: [PATCH 5/5] Version 0.8.0 --- composer.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/composer.json b/composer.json index 5f311ecc..4a18768e 100644 --- a/composer.json +++ b/composer.json @@ -1,7 +1,7 @@ { "name": "snowdog/frontools", "description": "Set of front-end tools for Magento 2, based on Gulp.js", - "version": "0.7.2", + "version": "0.8.0", "license": "MIT", "type": "magento2-component" }