[Gulp] Split gulpfiles and make them configurable

Inventis · Nov 23, 2016 · 1f12a6e · 1f12a6e
1 parent cb58dd1
commit 1f12a6e
Show file tree

Hide file tree

Showing 9 changed files with 137 additions and 26 deletions.
diff --git a/Gulpfile.js b/Gulpfile.js
@@ -1,16 +1,30 @@
 var gulp = require('gulp');
 var chug = require('gulp-chug');
+var argv = require('yargs').argv;
+
+config = [
+    '--rootPath',
+    argv.rootPath || '../../../../web/assets/',
+    '--nodeModulesPath',
+    argv.nodeModulesPath || '../../../../node_modules/'
+];
+
+gulp.task('ui', function() {
+    gulp.src('src/Sylius/Bundle/UiBundle/Gulpfile.js', { read: false })
+        .pipe(chug({ args: config }))
+    ;
+});
 
 gulp.task('admin', function() {
     gulp.src('src/Sylius/Bundle/AdminBundle/Gulpfile.js', { read: false })
-        .pipe(chug())
+        .pipe(chug({ args: config }))
     ;
 });
 
 gulp.task('shop', function() {
     gulp.src('src/Sylius/Bundle/ShopBundle/Gulpfile.js', { read: false })
-        .pipe(chug())
+        .pipe(chug({ args: config }))
     ;
 });
 
-gulp.task('default', ['admin', 'shop']);
+gulp.task('default', ['ui', 'admin', 'shop']);
diff --git a/package.json b/package.json
@@ -15,7 +15,8 @@
     "gulp-sourcemaps": "^1.6.0",
     "gulp-uglify": "^1.5.1",
     "gulp-uglifycss": "^1.0.5",
-    "merge-stream": "^1.0.0"
+    "merge-stream": "^1.0.0",
+    "yargs": "^6.4.0"
   },
   "scripts": {
     "gulp": "gulp"

diff --git a/src/Sylius/Bundle/AdminBundle/Gulpfile.js b/src/Sylius/Bundle/AdminBundle/Gulpfile.js
@@ -9,27 +9,25 @@ var sass = require('gulp-sass');
 var sourcemaps = require('gulp-sourcemaps');
 var uglify = require('gulp-uglify');
 var uglifycss = require('gulp-uglifycss');
+var argv = require('yargs').argv;
 
-var rootPath = '../../../../web/assets/';
+var rootPath = argv.rootPath;
 var adminRootPath = rootPath + 'admin/';
+var resourcePath = argv.resourcePath || '';
 
 var paths = {
     admin: {
         js: [
-            '../../../../node_modules/jquery/dist/jquery.min.js',
-            '../../../../node_modules/sortablejs/jquery.binding.js',
-            '../../../../node_modules/semantic-ui-css/semantic.min.js',
-            '../UiBundle/Resources/private/js/**',
-            'Resources/private/js/**'
+            resourcePath + 'Resources/private/js/**'
         ],
         sass: [
-            '../UiBundle/Resources/private/sass/**'
+            resourcePath + 'Resources/private/sass/**'
         ],
         css: [
-            '../../../../node_modules/semantic-ui-css/semantic.min.css'
+            resourcePath + 'Resources/private/css/**'
         ],
         img: [
-            '../UiBundle/Resources/private/img/**'
+            resourcePath + 'Resources/private/img/**'
         ]
     }
 };
@@ -44,8 +42,6 @@ gulp.task('admin-js', function () {
 });
 
 gulp.task('admin-css', function() {
-    gulp.src(['../../../../node_modules/semantic-ui-css/themes/**/*']).pipe(gulp.dest(adminRootPath + 'css/themes/'));
-
     var cssStream = gulp.src(paths.admin.css)
         .pipe(concat('css-files.css'))
     ;

diff --git a/src/Sylius/Bundle/AdminBundle/Resources/views/layout.html.twig b/src/Sylius/Bundle/AdminBundle/Resources/views/layout.html.twig
@@ -3,6 +3,7 @@
 {% block title %}Sylius | {% endblock %}
 
 {% block stylesheets %}
+    {{ parent() }}
     {% include 'SyliusUiBundle::_stylesheets.html.twig' with {'path': 'assets/admin/css/style.css'} %}
 {% endblock %}
 
@@ -39,5 +40,6 @@
 {% endblock %}
 
 {% block javascripts %}
+    {{ parent() }}
     {% include 'SyliusUiBundle::_javascripts.html.twig' with {'path': 'assets/admin/js/app.js'} %}
 {% endblock %}
diff --git a/src/Sylius/Bundle/ShopBundle/Gulpfile.js b/src/Sylius/Bundle/ShopBundle/Gulpfile.js
@@ -9,27 +9,25 @@ var sass = require('gulp-sass');
 var sourcemaps = require('gulp-sourcemaps');
 var uglify = require('gulp-uglify');
 var uglifycss = require('gulp-uglifycss');
+var argv = require('yargs').argv;
 
-var rootPath = '../../../../web/assets/';
+var rootPath = argv.rootPath;
 var shopRootPath = rootPath + 'shop/';
+var resourcePath = argv.resourcePath || '';
 
 var paths = {
     shop: {
         js: [
-            '../../../../node_modules/jquery/dist/jquery.min.js',
-            '../../../../node_modules/semantic-ui-css/semantic.min.js',
-            '../UiBundle/Resources/private/js/**',
-            'Resources/private/js/**'
+            resourcePath + 'Resources/private/js/**'
         ],
         sass: [
-            '../UiBundle/Resources/private/sass/**',
-            'Resources/private/scss/**'
+            resourcePath + 'Resources/private/sass/**'
         ],
         css: [
-            '../../../../node_modules/semantic-ui-css/semantic.min.css'
+            resourcePath + 'Resources/private/css/**'
         ],
         img: [
-            '../UiBundle/Resources/private/img/**'
+            resourcePath + 'Resources/private/img/**'
         ]
     }
 };
@@ -44,8 +42,6 @@ gulp.task('shop-js', function () {
 });
 
 gulp.task('shop-css', function() {
-    gulp.src(['../../../../node_modules/semantic-ui-css/themes/**/*']).pipe(gulp.dest(shopRootPath + 'css/themes/'));
-
     var cssStream = gulp.src(paths.shop.css)
             .pipe(concat('css-files.css'))
         ;

diff --git a/src/Sylius/Bundle/ShopBundle/Resources/views/layout.html.twig b/src/Sylius/Bundle/ShopBundle/Resources/views/layout.html.twig
@@ -13,6 +13,7 @@
     {% endblock %}
 
     {% block stylesheets %}
+        {% include 'SyliusUiBundle::_stylesheets.html.twig' with {'path': 'assets/ui/css/style.css'} %}
         {% include '@SyliusUi/_stylesheets.html.twig' with {'path': 'assets/shop/css/style.css'} %}
     {% endblock %}
 </head>
@@ -43,6 +44,7 @@
 </div>
 
 {% block javascripts %}
+    {% include 'SyliusUiBundle::_javascripts.html.twig' with {'path': 'assets/ui/js/app.js'} %}
     {% include '@SyliusUi/_javascripts.html.twig' with {'path': 'assets/shop/js/app.js'} %}
 {% endblock %}
 

diff --git a/src/Sylius/Bundle/UiBundle/Gulpfile.js b/src/Sylius/Bundle/UiBundle/Gulpfile.js
@@ -0,0 +1,96 @@
+var concat = require('gulp-concat');
+var env = process.env.GULP_ENV;
+var gulp = require('gulp');
+var gulpif = require('gulp-if');
+var livereload = require('gulp-livereload');
+var merge = require('merge-stream');
+var order = require('gulp-order');
+var sass = require('gulp-sass');
+var sourcemaps = require('gulp-sourcemaps');
+var uglify = require('gulp-uglify');
+var uglifycss = require('gulp-uglifycss');
+var argv = require('yargs').argv;
+
+var rootPath = argv.rootPath;
+var uiRootPath = rootPath + 'ui/';
+var resourcePath = argv.resourcePath || '';
+var nodeModulesPath = argv.nodeModulesPath;
+
+var paths = {
+    ui: {
+        js: [
+            resourcePath + 'Resources/private/js/**'
+        ],
+        sass: [
+            resourcePath + 'Resources/private/sass/**'
+        ],
+        css: [
+            resourcePath + 'Resources/private/css/**'
+        ],
+        img: [
+            resourcePath + 'Resources/private/img/**'
+        ]
+    },
+    nodeModules: {
+        js: [
+            nodeModulesPath + 'jquery/dist/jquery.min.js',
+            nodeModulesPath + 'semantic-ui-css/semantic.min.js'
+        ],
+        css: [
+            nodeModulesPath + 'semantic-ui-css/semantic.min.css'
+        ]
+    }
+};
+
+gulp.task('ui-js', function () {
+    var nodeModulesJsStream = gulp.src(paths.nodeModules.js)
+            .pipe(concat('node-modules.js'))
+        ;
+
+    var uiJsStream = gulp.src(paths.ui.js)
+            .pipe(concat('ui.js'))
+        ;
+
+    return merge(nodeModulesJsStream, uiJsStream)
+        .pipe(order(['node-modules.js', 'ui.js']))
+        .pipe(concat('app.js'))
+        .pipe(gulpif(env === 'prod', uglify()))
+        .pipe(sourcemaps.write('./'))
+        .pipe(gulp.dest(uiRootPath + 'js/'))
+    ;
+});
+
+gulp.task('ui-css', function() {
+    gulp.src([nodeModulesPath+'semantic-ui-css/themes/**/*']).pipe(gulp.dest(uiRootPath + 'css/themes/'));
+
+    var nodeModulesCssStream = gulp.src(paths.nodeModules.css)
+            .pipe(concat('node-modules-css-files.css'))
+        ;
+
+    var cssStream = gulp.src(paths.ui.css)
+            .pipe(concat('css-files.css'))
+        ;
+
+    var sassStream = gulp.src(paths.ui.sass)
+            .pipe(sass())
+            .pipe(concat('sass-files.scss'))
+        ;
+
+    return merge(nodeModulesCssStream, cssStream, sassStream)
+        .pipe(order(['node-modules-css-files.css', 'css-files.css', 'sass-files.scss']))
+        .pipe(concat('style.css'))
+        .pipe(gulpif(env === 'prod', uglifycss()))
+        .pipe(sourcemaps.write('./'))
+        .pipe(gulp.dest(uiRootPath + 'css/'))
+        .pipe(livereload())
+    ;
+});
+
+gulp.task('ui-img', function() {
+    return gulp.src(paths.ui.img)
+        .pipe(sourcemaps.write('./'))
+        .pipe(gulp.dest(uiRootPath + 'img/'))
+    ;
+});
+
+gulp.task('default', ['ui-js', 'ui-css', 'ui-img']);
diff --git a/src/Sylius/Bundle/UiBundle/Resources/views/Layout/centered.html.twig b/src/Sylius/Bundle/UiBundle/Resources/views/Layout/centered.html.twig
@@ -13,13 +13,15 @@
     {% endblock %}
 
     {% block stylesheets %}
+        {% include 'SyliusUiBundle::_stylesheets.html.twig' with {'path': 'assets/ui/css/style.css'} %}
     {% endblock %}
 </head>
 <body class="centered">
 {% block content %}
 {% endblock %}
 
 {% block javascripts %}
+    {% include 'SyliusUiBundle::_javascripts.html.twig' with {'path': 'assets/ui/js/app.js'} %}
 {% endblock %}
 </body>
 </html>
diff --git a/src/Sylius/Bundle/UiBundle/Resources/views/Layout/sidebar.html.twig b/src/Sylius/Bundle/UiBundle/Resources/views/Layout/sidebar.html.twig
@@ -13,6 +13,7 @@
     {% endblock %}
 
     {% block stylesheets %}
+        {% include 'SyliusUiBundle::_stylesheets.html.twig' with {'path': 'assets/ui/css/style.css'} %}
     {% endblock %}
 </head>
 
@@ -39,6 +40,7 @@
 {% include '@SyliusUi/Modal/_confirmation.html.twig' %}
 
 {% block javascripts %}
+    {% include 'SyliusUiBundle::_javascripts.html.twig' with {'path': 'assets/ui/js/app.js'} %}
 {% endblock %}
 </body>
 </html>