Giter VIP home page Giter VIP logo

gulp-watch-and-touch's Introduction

gulp-watch-and-touch

npm es2015 license Build Status Dependencies

πŸ‡ΊπŸ‡Έ English | πŸ‡·πŸ‡Ί Русский язык

Watch out for dependent files,
if they change - touch the file that includes them or any other file you need.

js-happiness-style

When to use it?

It is not for use in stream pipes

If your stream plugins can give some callbacks after their work,
with information about included files or If you know how to do it yourself - this it for you

What is this for?

Suppose that you have something like this file structure in your project

β”œβ”€β”¬ project-sources/
β”‚ β”œβ”€β”¬ sources-1/
β”‚ β”‚ β”œβ”€β”¬ group-of-files--1a/
β”‚ β”‚ β”‚ β”œβ”€β”€ included-in-main.file
β”‚ β”‚ β”‚ β”œβ”€β”€ included-in-main-and-addon.file
β”‚ β”‚ β”‚ β”œβ”€β”€ included-in-some-other-main.file # similar cases can also be)))
β”‚ β”‚ β”‚ β”œβ”€β”€ included-in-addon.file
β”‚ β”‚ β”‚ └── not-included-anywhere.file
β”‚ β”‚ β”‚ 
β”‚ β”‚ β”œβ”€β”€ group-of-files--1b/
β”‚ β”‚ β”œβ”€β”€ group-of-files--1c/
β”‚ β”‚ β”‚ 
β”‚ β”‚ β”œβ”€β”€ main.file
β”‚ β”‚ └── addon.file
β”‚ β”‚
β”‚ β”œβ”€β”¬ sources-2/
β”‚ β”‚ β”œβ”€β”€ group-of-files--2a/
β”‚ β”‚ β”œβ”€β”€ group-of-files--2b/ 
β”‚ β”‚ β”œβ”€β”€ group-of-files--2c/ 
β”‚ β”‚ β”œβ”€β”€ some-other-main.file
β”‚ β”‚ └── some-other-addon-or-theme-or-anything-else.file
β”‚ β”‚
β”‚ β”œβ”€β”¬ sources-3/
β”‚ β”‚ └── trigger-my-compilation-when-it-need-from-other-task.file

You have 5 files which must be rendered / compiled, and re-assembled when it REALLY needs in incremental builds. And if you change files that affect only one or two of them, there is no need to re-create all the others. But how to do that?

Of course, you can create 5 or more tasks with different source parameters and for each put an individual observer (gulp.watch() or some plugin for watching) - but this approach is not very convenient in case of changing dependencies, disable or enable imported files, etc. You need to manually rewrite each time your tasks or part of them

Another option is to put an watch on all the files you have to not overwrite anything, but this completely kills our goal, which is to optimize and speed up the process of work, only with those files that are really needed at that moment.

Our offer. Look at the whole situation from a different angle. If something happens to the connected files - they must signal about this to the files in which they are used!

Example

import gulp from 'gulp';

// function wrapper
import watchAndTouch from 'gulp-watch-and-touch';  

/**
 * give your gulp to it
 * and get function with its closure
 * @const {Function}
 * @param {string} uniqueKey
 * @param {string|Array} touchSrc
 * @param {string|Array} watchingSrc
 * @return {boolean}
 */
const wnt1 = watchAndTouch(gulp); 

/**
 * give your gulp to it
 * and get function with its closure
 * @const {Function}
 * @param {string} uniqueKey
 * @param {string|Array} touchSrc
 * @param {string|Array} watchingSrc
 * @return {boolean}
 */
const wnt2 = watchAndTouch(gulp);

// plugin which can give your
// callback with information
// about the included files there
import renderPlugin from 'some-gulp-plugin'; 

export function renderTask1 () {
    return gulp.src('sources-1/*.file') // yes that's all source you need ))
        .pipe(renderPlugin({
            option1: 'value1',
            option2: 'value2',
            afterRenderCallback: function(file, result, stats) {
                let includedSources = stats.includedFiles;
                let pathToCurrentFile = file.path;
                let uniqFileKey = pathToCurrentFile.replace(/\\|\/|\.|\s|/g, '_');

                let isChanged = wnt1(uniqFileKey, pathToCurrentFile, includedSources);
                if (isChanged) { // an example
                    console.log( `${ file.relative } change dependencies:\n${ includedSources.join('\n') }` );
                }
            }
        }))
}

// or
// ==============

const analyseFn = () => {
    // some actions that you know how to write
    // for analyse your files for getting information
    // about the included files there
    // on done call
    wnt2(uniqueKey, touchSrc, watchingSrc); 
};

How it works?

Look at the source code - it is really tiny script )).
In addition, the cache the results for each file.

Warn

it's use es6 syntax

Installing

npm install --save gulp-auto-watch
# or using yarn cli
yarn add gulp-auto-watch

Tests

npm test for testing code style

To Do

  • Write more tests
  • Write more examples with live code

Project Info

gulp-watch-and-touch's People

Contributors

olehdutchenko avatar

Stargazers

 avatar

Watchers

 avatar

gulp-watch-and-touch's Issues

Unexpected token export

Error when install module and import it in gulpfile.babel.js, even with using babel

export default function (gulp) {
^^^^^^
SyntaxError: Unexpected token export

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.