Merge pull request #9 from usamamuneerchaudhary/master

Added Gulp Support
azeemhassni · May 12, 2017 · bcc2368 · bcc2368
2 parents 5e26228 + affab5d
commit bcc2368
Show file tree

Hide file tree

Showing 13 changed files with 241 additions and 17 deletions.
diff --git a/src/Console/NewCommand.php b/src/Console/NewCommand.php
@@ -92,11 +92,16 @@ public function setVersion($version)
      */
     protected function configure()
     {
+
         $this
             ->setName('new')
             ->setDescription('Create a new WordPress application with Timber.')
             ->addArgument('name', InputArgument::OPTIONAL, 'Your applications\'s name')
-            ->addArgument('version', InputArgument::OPTIONAL, 'The version of WordPress to download');
+            ->addArgument('version', InputArgument::OPTIONAL, 'The version of WordPress to download')
+
+            ->addOption('npm', null, InputOption::VALUE_NONE, 'Pass this option if you want to install npm packages');
+
+
     }
 
     /**
@@ -119,7 +124,7 @@ public function execute(InputInterface $input, OutputInterface $output)
 
         $zipFile = $this->download($output);
 
-        $output->writeln( '<info>Extracting package</info>');
+        $output->writeln('<info>Extracting package</info>');
         $this->extract($zipFile);
 
         $output->writeln('<info>Generating WordPress theme & installing timber</info>');
@@ -329,7 +334,9 @@ protected function createApplicationDirectory()
      */
     protected function verifyZipIntegrity($algorithm = 'md5')
     {
-        $request = new Client();
+        $request = new Client([
+            'verify' => false
+        ]);
         $response = $request->get($this->getUrl($algorithm));
         $remoteChecksum = $response->getBody();
         $localChecksum = md5_file($this->getZipFilePath());

diff --git a/src/Generators/Theme.php b/src/Generators/Theme.php
@@ -7,6 +7,7 @@
 use Symfony\Component\Console\Input\InputInterface;
 use Symfony\Component\Console\Output\OutputInterface;
 use Symfony\Component\Filesystem\Filesystem;
+use Symfony\Component\Process\Process;
 
 /**
  * Class Theme
@@ -44,13 +45,13 @@ class Theme
      * @param InputInterface $input
      * @param OutputInterface $output
      */
-    public function __construct( $name, InputInterface $input, OutputInterface $output )
+    public function __construct($name, InputInterface $input, OutputInterface $output)
     {
-        $this->name       = $name;
-        $this->path       = getcwd() . '/' . $name . '/wp-content/themes/' . $name;
+        $this->name = $name;
+        $this->path = getcwd() . '/' . $name . '/wp-content/themes/' . $name;
         $this->fileSystem = new Filesystem();
-        $this->input      = $input;
-        $this->output     = $output;
+        $this->input = $input;
+        $this->output = $output;
     }
 
     public function getThemeFilesDirectory()
@@ -67,10 +68,37 @@ public function generate()
             ->installTimber()
             ->scaffoldWPTheme()
             ->replaceThemeName();
+
+        if($this->input->getOption('npm')) {
+            $this->setupGulp();
+        }
 
         return $this;
     }
 
+    /**
+     * @return Process
+     */
+    public function setupGulp()
+    {
+        $process = new Process("cd $this->path && npm install");
+
+
+        $process->setTimeout(2 * 3600);
+
+        if ('\\' !== DIRECTORY_SEPARATOR && file_exists('/dev/tty') && is_readable('/dev/tty')) {
+            $process->setTty(true);
+        }
+
+        $process->run(function ( $type, $line ) {
+            $this->output->writeln($line);
+
+        });
+
+        return $this;
+    }
+
+
     /**
      * Create theme directory
      */
@@ -107,7 +135,7 @@ public function getInput()
      * @param InputInterface $input
      * @return Theme
      */
-    public function setInput( $input )
+    public function setInput($input)
     {
         $this->input = $input;
 
@@ -126,7 +154,7 @@ public function getOutput()
      * @param OutputInterface $output
      * @return Theme
      */
-    public function setOutput( $output )
+    public function setOutput($output)
     {
         $this->output = $output;
 
@@ -139,7 +167,7 @@ public function setOutput( $output )
      * @param $directory
      * @return $this
      */
-    protected function copyFiles( $directory )
+    protected function copyFiles($directory)
     {
         $files = glob($directory . '/*');
 
@@ -172,7 +200,11 @@ protected function scaffoldWPTheme()
     private function replaceThemeName()
     {
         $stylesheet = $this->path . '/style.css';
+        $packageJson = $this->path . '/package.json';
 
+        /**
+         * Replace Author & Theme Name in style.css File
+         */
         file_put_contents(
             $stylesheet,
             str_replace(
@@ -182,6 +214,19 @@ private function replaceThemeName()
             )
         );
 
+        /**
+         * Replace Author & Package Name in package.json File
+         */
+        file_put_contents(
+            $packageJson,
+            str_replace(
+                ['@THEME_NAME@', '@AUTHOR_NAME@'],
+                [$this->name, get_current_user()],
+                file_get_contents($packageJson)
+            )
+        );
+
+
         return $this;
     }
 }
diff --git a/theme/404.php b/theme/404.php
@@ -0,0 +1,9 @@
+<?php
+use Timber\Timber;
+/**
+ * Default 404 Page
+ */
+
+$context = Timber::get_context();
+
+Timber::render('views/pages/404.twig',$context);
diff --git a/theme/GulpFile.js b/theme/GulpFile.js
@@ -0,0 +1,53 @@
+var gulp = require('gulp');
+var concat = require('gulp-concat');
+var rename = require('gulp-rename');
+var sass = require('gulp-sass');
+var uglify = require('gulp-uglify');
+var cleancss = require('gulp-clean-css');
+var imgmin = require('gulp-imagemin');
+
+/**
+ * Styles Task
+ */
+gulp.task('styles',function(){
+    return gulp.src(['resources/sass/style.scss'])
+        .pipe(sass())
+        .pipe(cleancss())
+        .pipe(concat('main.css'))
+        .pipe(rename({suffix : '.min'}))
+        .pipe(gulp.dest('assets/css/'))
+});
+
+/**
+ * Images Task
+ */
+gulp.task('images', function () {
+    return gulp.src(['resources/images/**/*'])
+        .pipe(imgmin())
+        .pipe(gulp.dest('assets/images/'));
+});
+
+/**
+ * Scripts Task
+ */
+gulp.task('scripts', function(){
+    return gulp.src(['resources/js/**/*.js'])
+        .pipe(concat('all.min.js'))
+        .pipe(uglify())
+        .pipe(gulp.dest('assets/js/'))
+
+});
+
+/**
+ * Watch Task
+ */
+gulp.task('watch', function () {
+    gulp.watch('resources/sass/**/*.scss', ['styles']);
+    gulp.watch('resources/js/*.js', ['scripts']);
+});
+
+/**
+ * Default Task
+ */
+gulp.task('default', ['styles','scripts','images','watch']);
+
diff --git a/theme/functions.php b/theme/functions.php
@@ -1,4 +1,18 @@
 <?php
-
 require_once __DIR__ . '/vendor/autoload.php';
 
+
+/**
+ * Die and Dump method
+ */
+if(!function_exists('dd')) {
+    function dd()
+    {
+        echo "<pre>";
+        array_map(function ($data) {
+            print_r($data);
+        }, func_get_args());
+        echo "</pre>";
+        die;
+    }
+}
diff --git a/theme/package.json b/theme/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@THEME_NAME@",
+  "version": "1.0.0",
+  "description": "Pine uses NPM",
+  "author": "@AUTHOR_NAME@",
+  "devDependencies": {
+    "gulp": "^3.9.1",
+    "gulp-clean-css": "^3.2.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-imagemin": "^3.2.0",
+    "gulp-rename": "^1.2.2",
+    "gulp-sass": "^3.1.0",
+    "gulp-uglify": "^2.1.2"
+  }
+}
diff --git a/theme/js/app.js → theme/resources/libs/app.js b/theme/js/app.js → theme/resources/libs/app.js
diff --git a/theme/sass/style.scss → theme/resources/sass/style.scss b/theme/sass/style.scss → theme/resources/sass/style.scss
diff --git a/theme/views/includes/footer.twig b/theme/views/includes/footer.twig
@@ -1,2 +1,4 @@
+
+  <script src="{{ site.theme.link }}/assets/js/all.min.js"></script>
 </body>
 </html>
diff --git a/theme/views/includes/header.twig b/theme/views/includes/header.twig
@@ -9,9 +9,66 @@
         {% endif %}
     </title>
     <meta name="description" content="{{ site.description }}">
-    <link rel="stylesheet" href="{{ site.theme.link }}/style.css" type="text/css" media="screen"/>
+    <link rel="stylesheet" href="{{ site.theme.link }}/assets/css/main.min.css" type="text/css" media="screen"/>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+            <!-- Fonts -->
+        <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
+
+        <!-- Styles -->
+        <style>
+            html, body {
+                background-color: #fff;
+                color: #636b6f;
+                font-family: 'Raleway', sans-serif;
+                font-weight: 100;
+                height: 100vh;
+                margin: 0;
+                margin-top:8%;
+            }
+
+            .full-height {
+                height: 100vh;
+            }
+
+            .flex-center {
+                align-items: center;
+                display: flex;
+                justify-content: center;
+            }
+
+            .position-ref {
+                position: relative;
+            }
+
+            .top-right {
+                position: absolute;
+                right: 10px;
+                top: 18px;
+            }
+
+            .content {
+                text-align: center;
+            }
+
+            .title {
+                font-size: 84px;
+            }
+
+            .links > a {
+                color: #636b6f;
+                padding: 0 25px;
+                font-size: 12px;
+                font-weight: 600;
+                letter-spacing: .1rem;
+                text-decoration: none;
+                text-transform: uppercase;
+            }
+
+            .m-b-md {
+                margin-bottom: 30px;
+            }
+        </style>
 </head>
 <body>
diff --git a/theme/views/layouts/master.twig b/theme/views/layouts/master.twig
@@ -1,3 +1,3 @@
 {% include 'views/includes/header.twig' %}
-{% block content %}{% endblock %}
+{% block content %} {% endblock %}
 {% include 'views/includes/footer.twig' %}
diff --git a/theme/views/pages/404.twig b/theme/views/pages/404.twig
@@ -0,0 +1,13 @@
+{% extends 'views/layouts/master.twig' %}
+
+{% block content %}
+
+    <div class="content">
+        <div class="title m-b-md">
+            404
+        </div>
+
+    </div>
+    </div>
+
+{% endblock %}
diff --git a/theme/views/pages/index.twig b/theme/views/pages/index.twig
@@ -2,8 +2,17 @@
 
 {% block content %}
 
-    <pre style="font-size: 25px">
-        Timber is ready for you - Build something amazing
-    </pre>
+    <div class="content">
+                <div class="title m-b-md">
+                    Pine
+                </div>
+
+                <div class="links">
+                    <a href="https://www.upstatement.com/timber/">Timber Upstatement</a>
+                    <a href="http://timber.github.io/timber/">Timber Docs</a>
+                    <a href="https://twig.sensiolabs.org/doc/2.x/">Twig</a>
+                </div>
+            </div>
+        </div>
 
 {% endblock %}