tschaub / gulp-newer

Pass through newer source files only
https://npmjs.org/package/gulp-newer
226 stars 24 forks source link

How can I only compile changed/new .js files? #71

Open Goldjan opened 6 years ago

Goldjan commented 6 years ago

This script compiles all .js files from the ./src js folder to es6. These are saved individually! The path remains the same, only ./src/js becomes ./build/js. This is important! I do not want to have bundle.js.

When I call this task, every time all .js files are compiled. However, only currently changed files should be compiled. But how? How can I add this into my task?

package.json (part of it):

"paths": {
  "src": {
    "base": "./src/",
    "css": "./src/css/",
    "json": "./src/json/",
    "js": "./src/js/",
    "scss": "./src/scss/"
  },
  "dist": {
    "base": "./public/",
    "css": "./public/css/",
    "js": "./public/js/",
    "material": "./public/js/@material/"
  },
  "build": {
    "base": "./build/",
    "css": "./build/css/",
    "js": "./build/js/",
    "html": "./build/html/"
  }
},
"globs": {
  "babelJs": [
    "./src/js/**/*.js"
  ] 
}

gulpfile.js:

gulp.task('js-babel', function() {
  console.log($.chalk.yellow.bold('--> Transpiling Javascript via Browserify & Babelify...'));
  let files = $.glob.sync(''+pkg.globs.babelJs+'');
  // map them to  streams
  let tasks = files.map(function(entry) {
      return $.browserify({ entries: [entry] })
          .transform('babelify')
          .bundle()
          .pipe($.vinylSourceStream(entry))
          .pipe($.flatten()) // Important!!!!
          .pipe(gulp.dest(pkg.paths.build.js))
          .pipe($.size({gzip: true, showFiles: true}));
    });
    // merge
    return $.eventStream.merge.apply(null, tasks);
});

In my SASS task it was easy:

.pipe($.newer({
    dest: pkg.paths.build.css,
    ext: '.css',
    extra: pkg.paths.src.scss + '/**/*'
}))
QJan84 commented 5 years ago

No idea?