WordPress.org
Get WordPress

Plugin Directory

Changeset 2567008


Ignore:
Timestamp:
07/19/2021 07:38:33 AM (5 years ago)
Author:
Lars-
Message:

Updated readme and folder

Location:
jvh-easy-scss-and-js/trunk
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • jvh-easy-scss-and-js/trunk/readme.txt

    r2566987 r2567008  
    2020
    2121Let's assume this structure:
    22 ```
    23 your theme
    24 ├── assets
    25 │   ├── js
    26 │   │   └── script.js
    27 │   └── scss
    28 │       └── style.scss
    29 ├── functions.php
    30 └── ...
    31 ```
     22    your theme
     23    ├── assets
     24    │   ├── js
     25    │   │   └── script.js
     26    │   └── scss
     27    │       └── style.scss
     28    ├── functions.php
     29    └── ...
    3230
    3331You can now do this in your functions.php with styles:
    34 ``
    35 <?php
    36 add_action('wp_enqueue_scripts', static function(){
    37     /* Full version */
    38     \EasySCSSandJS\Styles::add('my_style_handle', __DIR__ .'/assets/scss/style.scss', [],[], true);
     32    <?php
     33    add_action('wp_enqueue_scripts', static function(){
     34        /* Full version */
     35        \EasySCSSandJS\Styles::add('my_style_handle', __DIR__ .'/assets/scss/style.scss', [],[], true);
    3936
    40     /* Shortest version */
    41     \EasySCSSandJS\Styles::add('my_style_handle', __DIR__ .'/assets/scss/style.scss');
     37        /* Shortest version */
     38        \EasySCSSandJS\Styles::add('my_style_handle', __DIR__ .'/assets/scss/style.scss');
    4239
    43     /* Add dependencies (example: depends on handle 'bootstrap') */
    44     \EasySCSSandJS\Styles::add('my_style_handle', __DIR__ .'/assets/scss/style.scss', ['bootstrap']);
     40        /* Add dependencies (example: depends on handle 'bootstrap') */
     41        \EasySCSSandJS\Styles::add('my_style_handle', __DIR__ .'/assets/scss/style.scss', ['bootstrap']);
    4542
    46     /* Add variables */
    47     \EasySCSSandJS\Styles::add('my_style_handle', __DIR__ .'/assets/scss/style.scss', [], [
    48         'my_cool_color' => '#0000ff',
    49     ]);
     43        /* Add variables */
     44        \EasySCSSandJS\Styles::add('my_style_handle', __DIR__ .'/assets/scss/style.scss', [], [
     45            'my_cool_color' => '#0000ff',
     46        ]);
    5047
    51     /* Enqueue it yourself */
    52     \EasySCSSandJS\Styles::add('my_style_handle', __DIR__ .'/assets/scss/style.scss', [], [], false);
    53     wp_enqueue_style('my_style_handle');
    54 });
    55 ``
     48        /* Enqueue it yourself */
     49        \EasySCSSandJS\Styles::add('my_style_handle', __DIR__ .'/assets/scss/style.scss', [], [], false);
     50        wp_enqueue_style('my_style_handle');
     51    });
     52
    5653
    5754And this with scripts:
    58 ``
    59 <?php
    60 add_action('wp_enqueue_scripts', static function(){
    61     /* Full version */
    62     \EasySCSSandJS\Scripts::add('my_script_handle', __DIR__ .'/assets/js/script.js', ['jquery'], [], true, true);
     55    <?php
     56    add_action('wp_enqueue_scripts', static function(){
     57        /* Full version */
     58        \EasySCSSandJS\Scripts::add('my_script_handle', __DIR__ .'/assets/js/script.js', ['jquery'], [], true, true);
    6359
    64     /* Shortest version (jquery is by default a dependency) */
    65     \EasySCSSandJS\Scripts::add('my_script_handle', __DIR__ .'/assets/js/script.js');
     60        /* Shortest version (jquery is by default a dependency) */
     61        \EasySCSSandJS\Scripts::add('my_script_handle', __DIR__ .'/assets/js/script.js');
    6662
    67     /* No dependencies (also no jquery) */
    68     \EasySCSSandJS\Scripts::add('my_script_handle', __DIR__ .'/assets/js/script.js', []);
     63        /* No dependencies (also no jquery) */
     64        \EasySCSSandJS\Scripts::add('my_script_handle', __DIR__ .'/assets/js/script.js', []);
    6965
    70     /* Add dependencies (besides jquery) */
    71     \EasySCSSandJS\Scripts::add('my_script_handle', __DIR__ .'/assets/js/script.js', ['jquery', 'other_script']);
     66        /* Add dependencies (besides jquery) */
     67        \EasySCSSandJS\Scripts::add('my_script_handle', __DIR__ .'/assets/js/script.js', ['jquery', 'other_script']);
    7268
    73     /* Add variables */
    74     \EasySCSSandJS\Scripts::add('my_script_handle', __DIR__ .'/assets/js/script.js', ['jquery'], [
    75         'my_variable' => 'testing this awesome plugin',
    76     ]);
     69        /* Add variables */
     70        \EasySCSSandJS\Scripts::add('my_script_handle', __DIR__ .'/assets/js/script.js', ['jquery'], [
     71            'my_variable' => 'testing this awesome plugin',
     72        ]);
    7773
    78     /* Enqueue it yourself */
    79     \EasySCSSandJS\Scripts::add('my_script_handle', __DIR__ .'/assets/js/script.js', ['jquery'], [], false);
    80     wp_enqueue_script('my_script_handle');
     74        /* Enqueue it yourself */
     75        \EasySCSSandJS\Scripts::add('my_script_handle', __DIR__ .'/assets/js/script.js', ['jquery'], [], false);
     76        wp_enqueue_script('my_script_handle');
    8177
    82     /* Add the script to the header instead of the footer */
    83     \EasySCSSandJS\Scripts::add('my_script_handle', __DIR__ .'/assets/js/script.js', ['jquery'], [], true, false);
    84 });
    85 ``
     78        /* Add the script to the header instead of the footer */
     79        \EasySCSSandJS\Scripts::add('my_script_handle', __DIR__ .'/assets/js/script.js', ['jquery'], [], true, false);
     80    });
    8681
    8782Use variables in SCSS:
    88 ``
    89 // This is recommended. It will throw a fatal error if your PHP doesn't set the variable for some reason.
    90 // If PHP does set it, it will replace $my_cool_color with the defined color in PHP.
    91 $my_cool_color: #ffffff !default;
     83    // This is recommended. It will throw a fatal error if your PHP doesn't set the variable for some reason.
     84    // If PHP does set it, it will replace $my_cool_color with the defined color in PHP.
     85    $my_cool_color: #ffffff !default;
    9286
    93 body{
    94   background-color: $my_cool_color; // This will be blue (#0000ff)
    95 }
    96 ``
     87    body{
     88      background-color: $my_cool_color; // This will be blue (#0000ff)
     89    }
    9790
    9891Use variables in JS:
    99 ``
    100 alert(my_script_handle_vars.my_variable);
    101 ``
     92    alert(my_script_handle_vars.my_variable);
     93
     94Compiled files will be saved in wp-content/uploads/compiled-scss-and-js. When that folder is cleared, everything will be regenerated.
    10295
    10396== Filters ==

  • jvh-easy-scss-and-js/trunk/src/Scripts.php

    r2566970 r2567008  
    88
    99class Scripts {
    10     private static self $instance;
     10    private static self $instance;
    1111
    12     public function __construct() {
    13         require_once __DIR__ . '/../vendor/JShrink/Minifier.php';
    14     }
     12    public function __construct() {
     13        require_once __DIR__ . '/../vendor/JShrink/Minifier.php';
     14    }
    1515
    16     public static function add(
    17         string $handle,
    18         string $file,
    19         array $dependencies = ['jquery'],
    20         array $variables = [],
    21         bool $enqueue = true,
    22         bool $inFooter = true
    23     ): void {
    24         self::instance()->addScript($handle, $file, $dependencies, $variables, $enqueue, $inFooter);
    25     }
     16    public static function add(
     17        string $handle,
     18        string $file,
     19        array $dependencies = [ 'jquery' ],
     20        array $variables = [],
     21        bool $enqueue = true,
     22        bool $inFooter = true
     23    ): void {
     24        self::instance()->addScript( $handle, $file, $dependencies, $variables, $enqueue, $inFooter );
     25    }
    2626
    27     public function addScript(
    28         string $handle,
    29         string $file,
    30         array $dependencies = ['jquery'],
    31         array $variables = [],
    32         bool $enqueue = true,
    33         bool $inFooter = true
    34     ): void {
    35         if ( ! file_exists($file)) {
    36             throw new RuntimeException("$file does not exist");
    37         }
    38         $file = realpath($file);
     27    public function addScript(
     28        string $handle,
     29        string $file,
     30        array $dependencies = [ 'jquery' ],
     31        array $variables = [],
     32        bool $enqueue = true,
     33        bool $inFooter = true
     34    ): void {
     35        if ( ! file_exists( $file ) ) {
     36            throw new RuntimeException( "$file does not exist" );
     37        }
     38        $file = realpath( $file );
    3939
    40         $compiledUrl = $this->compile($file, $handle);
    41         if ($compiledUrl === '') {
    42             return;
    43         }
     40        $compiledUrl = $this->compile( $file, $handle );
     41        if ( $compiledUrl === '' ) {
     42            return;
     43        }
    4444
    45         wp_register_script($handle, $compiledUrl, $dependencies, false, $inFooter);
     45        wp_register_script( $handle, $compiledUrl, $dependencies, false, $inFooter );
    4646
    47         $extraVariables = apply_filters('easy_js_extra_variables', $variables, $handle, $file, $dependencies);
    48         if ($extraVariables !== []) {
    49             wp_localize_script($handle, str_replace('-', '_', $handle) . '_vars', $extraVariables);
    50         }
     47        $extraVariables = apply_filters( 'easy_js_extra_variables', $variables, $handle, $file, $dependencies );
     48        if ( $extraVariables !== [] ) {
     49            wp_localize_script( $handle, str_replace( '-', '_', $handle ) . '_vars', $extraVariables );
     50        }
    5151
    52         if ($enqueue) {
    53             wp_enqueue_script($handle);
    54         }
    55     }
     52        if ( $enqueue ) {
     53            wp_enqueue_script( $handle );
     54        }
     55    }
    5656
    57     private function compile(string $file, string $handle): string {
    58         $filename                 = basename($file);
    59         $filenameWithoutExtension = str_replace('.', '-', $filename);
    60         $directoryId              = $this->hashDirectory(dirname($file));
    61         $finalJSFilename          = "$handle-$filenameWithoutExtension-$directoryId.js";
     57    private function compile( string $file, string $handle ): string {
     58        $filename                 = basename( $file );
     59        $filenameWithoutExtension = str_replace( '.', '-', $filename );
     60        $directoryId              = $this->hashDirectory( dirname( $file ) );
     61        $finalJSFilename          = "$handle-$filenameWithoutExtension-$directoryId.js";
    6262
    63         $outputDirectory    = trailingslashit($this->createOutputDirectory());
    64         $outputDirectoryUrl = trailingslashit($this->getOutputDirectoryUrl());
     63        $outputDirectory    = trailingslashit( $this->createOutputDirectory() );
     64        $outputDirectoryUrl = trailingslashit( $this->getOutputDirectoryUrl() );
    6565
    66         if (file_exists($outputDirectory . $finalJSFilename)) {
    67             return $outputDirectoryUrl . $finalJSFilename;
    68         }
     66        if ( file_exists( $outputDirectory . $finalJSFilename ) ) {
     67            return $outputDirectoryUrl . $finalJSFilename;
     68        }
    6969
    70         try {
    71             $content = Minifier::minify(file_get_contents($file), ['flaggedComments' => false]);
    72             $this->removeOldFiles($outputDirectory . "$handle-$filenameWithoutExtension-*");
    73             file_put_contents($outputDirectory . $finalJSFilename, $content);
     70        try {
     71            $content = Minifier::minify( file_get_contents( $file ), [ 'flaggedComments' => false ] );
     72            $this->removeOldFiles( $outputDirectory . "$handle-$filenameWithoutExtension-*" );
     73            file_put_contents( $outputDirectory . $finalJSFilename, $content );
    7474
    75             return $outputDirectoryUrl . $finalJSFilename;
    76         } catch (Exception $e) {
    77             if (defined('WP_DEBUG') && WP_DEBUG) {
    78                 echo "JS file ($file) could not be compiled. Error details:\n";
    79                 echo $e->getMessage() . "\n" . $e->getFile() . ' Line:' . $e->getLine() . "\n";
    80                 echo $e->getTraceAsString() . "\n\n";
    81             } else {
    82                 echo "One or more JS files could not be compiled. Enable WP_DEBUG to see the error details.\n";
    83             }
    84         }
     75            return $outputDirectoryUrl . $finalJSFilename;
     76        } catch ( Exception $e ) {
     77            if ( defined( 'WP_DEBUG' ) && WP_DEBUG ) {
     78                echo "JS file ($file) could not be compiled. Error details:\n";
     79                echo $e->getMessage() . "\n" . $e->getFile() . ' Line:' . $e->getLine() . "\n";
     80                echo $e->getTraceAsString() . "\n\n";
     81            } else {
     82                echo "One or more JS files could not be compiled. Enable WP_DEBUG to see the error details.\n";
     83            }
     84        }
    8585
    86         return '';
    87     }
     86        return '';
     87    }
    8888
    89     private function hashDirectory($directory): int {
    90         if ( ! is_dir($directory)) {
    91             return 0;
    92         }
     89    private function hashDirectory( $directory ): int {
     90        if ( ! is_dir( $directory ) ) {
     91            return 0;
     92        }
    9393
    94         $total = 0;
    95         $dir   = dir($directory);
     94        $total = 0;
     95        $dir   = dir( $directory );
    9696
    97         while (false !== ($file = $dir->read())) {
    98             if ($file === '.' || $file === '..') {
    99                 continue;
    100             }
    101             if (is_dir($directory . '/' . $file)) {
    102                 $total += $this->hashDirectory($directory . '/' . $file);
    103             } else {
    104                 $total += filemtime($directory . '/' . $file);
    105             }
    106         }
     97        while ( false !== ( $file = $dir->read() ) ) {
     98            if ( $file === '.' || $file === '..' ) {
     99                continue;
     100            }
     101            if ( is_dir( $directory . '/' . $file ) ) {
     102                $total += $this->hashDirectory( $directory . '/' . $file );
     103            } else {
     104                $total += filemtime( $directory . '/' . $file );
     105            }
     106        }
    107107
    108         $dir->close();
     108        $dir->close();
    109109
    110         return $total;
    111     }
     110        return $total;
     111    }
    112112
    113     private function createOutputDirectory(): string {
    114         $uploads_dir = trailingslashit(wp_upload_dir()['basedir']) . 'easy-scss-and-js-generated-assets';
    115         if ( ! is_dir($uploads_dir)) {
    116             wp_mkdir_p($uploads_dir);
    117         }
     113    private function createOutputDirectory(): string {
     114        $uploads_dir = trailingslashit( wp_upload_dir()['basedir'] ) . 'compiled-scss-and-js';
     115        if ( ! is_dir( $uploads_dir ) ) {
     116            wp_mkdir_p( $uploads_dir );
     117        }
    118118
    119         return $uploads_dir;
    120     }
     119        return $uploads_dir;
     120    }
    121121
    122     private function getOutputDirectoryUrl(): string {
    123         return trailingslashit(wp_upload_dir()['baseurl']) . 'easy-scss-and-js-generated-assets';
    124     }
     122    private function getOutputDirectoryUrl(): string {
     123        return trailingslashit( wp_upload_dir()['baseurl'] ) . 'compiled-scss-and-js';
     124    }
    125125
    126     private function removeOldFiles(string $filenameStart): void {
    127         array_map('unlink', glob($filenameStart));
    128     }
     126    private function removeOldFiles( string $filenameStart ): void {
     127        array_map( 'unlink', glob( $filenameStart ) );
     128    }
    129129
    130     public static function instance(): self {
    131         if ( ! isset(self::$instance)) {
    132             self::$instance = new self;
    133         }
     130    public static function instance(): self {
     131        if ( ! isset( self::$instance ) ) {
     132            self::$instance = new self;
     133        }
    134134
    135         return self::$instance;
    136     }
     135        return self::$instance;
     136    }
    137137}

  • jvh-easy-scss-and-js/trunk/src/Styles.php

    r2566987 r2567008  
    131131
    132132    private function createOutputDirectory(): string {
    133         $uploads_dir = trailingslashit(wp_upload_dir()['basedir']) . 'easy-scss-and-js-generated-assets';
     133        $uploads_dir = trailingslashit(wp_upload_dir()['basedir']) . 'compiled-scss-and-js';
    134134        if ( ! is_dir($uploads_dir)) {
    135135            wp_mkdir_p($uploads_dir);
    … …  
    140140
    141141    private function getOutputDirectoryUrl(): string {
    142         return trailingslashit(wp_upload_dir()['baseurl']) . 'easy-scss-and-js-generated-assets';
     142        return trailingslashit(wp_upload_dir()['baseurl']) . 'compiled-scss-and-js';
    143143    }
    144144
Note: See TracChangeset for help on using the changeset viewer.