How assets section is working ?
During build it gives expected result - languages extended.
But once running webpack-dev-server it gives assets from file (not extended) - assets is built.
As i know webpack should load all assets into memory, why it gives assets from file and not built assets ?
Thanks
compiler.plugin('emit', function (compilation, callback) {
console.log('\nBuilding Languages...\n');
getBaseLanguages(function (files) {
Promise
.all(files.map(function (file) {
return languageBuilder.build(file).then(setAsset);
}))
.then(function () {
callback();
});
});
function setAsset(langs) {
langs.forEach(function (lang) {
compilation.assets[lang.path] = {
source: function () {
return JSON.stringify(lang.file);
},
size: function () {
return lang.file.length;
}
};
});
}
});
Related
I'm writing a gulp file to build and concatenate JS files. The main purpose is to build ES6 code with Babel in a main.build.js, then concatenate additional libraries/dependencies in a main.deps.jsfile, and concatenate both files in a final main.bundle.js file. This is done for frontend and admin, so the output must be two files (main.bundle.js and admin.bundle.js).
To do that, I've created 3 tasks, and one to trigger all with one command. Here is my gulpfile.js code:
task("js:build", (done) => {
browserify({entries: path.resolve(srcPath, "js/main.js")})
.transform(babelify.configure({
presets: ["#babel/preset-env"]
}))
.bundle()
.on("error", (e) => {
console.error(e.message);
})
.pipe(source("main.build.js"))
.pipe(dest(path.resolve(distPath, "js/standalone")));
browserify({entries: path.resolve(srcPath, "js/admin.js")})
.transform(babelify.configure({
presets: ["#babel/preset-env"]
}))
.bundle()
.on("error", (e) => {
console.error(e.message);
})
.pipe(source("admin.build.js"))
.pipe(dest(path.resolve(distPath, "js/standalone")));
done();
});
task("js:deps", (done) => {
let mainDeps = jsDeps.main.map((asset) => {
return asset.indexOf("node_modules") > -1 ? asset : path.resolve(srcPath, "js/plugins", asset);
});
let adminDeps = jsDeps.admin.map((asset) => {
return asset.indexOf("node_modules") > -1 ? asset : path.resolve(srcPath, "js/plugins", asset);
});
if(mainDeps.length > 0){
src(mainDeps)
.pipe(plumber())
.pipe(concat("main.deps.js"))
.pipe(dest(path.resolve(distPath, "js/standalone")));
}
if(adminDeps.length > 0){
src(adminDeps)
.pipe(plumber())
.pipe(concat("admin.deps.js"))
.pipe(dest(path.resolve(distPath, "js/standalone")));
}
done();
});
task("js:concat", (done) => {
let mainDeps = path.resolve(distPath, "js/standalone/main.deps.js");
let mainBuild = path.resolve(distPath, "js/standalone/main.build.js");
let adminDeps = path.resolve(distPath, "js/standalone/admin.deps.js");
let adminBuild = path.resolve(distPath, "js/standalone/admin.build.js");
let main = fs.existsSync(mainDeps) ? [mainDeps, mainBuild] : [mainBuild];
let admin = fs.existsSync(adminDeps) ? [adminDeps, adminBuild] : [adminBuild];
src(main)
.pipe(plumber())
.pipe(concat("main.bundle.js"))
.pipe(dest(path.resolve(distPath, "js")));
src(admin)
.pipe(plumber())
.pipe(concat("admin.bundle.js"))
.pipe(dest(path.resolve(distPath, "js")));
done();
});
task("js", series("js:deps", "js:build", "js:concat"));
The problem is: when I run gulp js in my terminal, it throws an error that main.build.jsfile was not found, as if the js:build task hasn't executed. And, obviously, main.build.js isn't generated at desired folder.
But, for my surprise, if I run each task separately in my terminal (gulp js:deps, then gulp js:build, then gulp js:concat), it works like a charm, just like as expected. All .build and .deps file are generated and concatenated in .bundle files.
Looks like the gulp js:build isn't running when calling inside a series, or the series isn't running tasks in series (it's running like a parallel).
Can someone help me fixing that? Thanks!
I have just migrated an old project from gulp 3 to gulp 4.0.0. I'm having trouble making gulp.watch tasks run within my watch function. I'm running on Windows.
The watch function is as follows:
function watch(done) {
gulp.watch(LAYOUTSFILES, copytosomelocation);
gulp.watch(MODULEFILES, copymodulestosomelocation);
gulp.watch(DLLFILES, gacdeploy);
gulp.watch("./Styles/**/*.less", cssless);
console.log("watching");
done();
}
Locations are formatted as follows (worked in gulp 3, so locations are at least correct):
let LAYOUTSFILES = [
"./Folder/Project/**/*.*"
];
This is the first task being called:
function copytosomelocation() {
console.log("In copy");
return gulp.src(LAYOUTSFILES)
.pipe(fileCache.filter())
.pipe(gulp.dest(OUTLAYOUTS));
}
At the end of the gulpfile, I have exports.watch = watch;.
When I run, I get the following output:
[18:43:59] Using gulpfile
D:\git\repo\folder\someproject\gulpfile.js
[18:43:59] Starting 'watch'...
watching
[18:43:59] Finished 'watch' after 17 ms
That is to say
- No files are copied
- No output is logged to the console from function copytosomelocation.
What am I missing?
I had neglected to take the necessary task dependency changes with me to the new structure.
The original watch function was structured as follows:
gulp.task("watch", ["webpack-watch"], () => { ... });
which described a dependency on the following:
gulp.task('webpack-watch', (done) => {
runWebpack(["-d"], true, done);
});
function runWebpack(params, watch, done) {
params = params || [];
params.push("--color");
if (watch) {
params.push("-w");
}
if (watch) {
spawnCommand("webpack", params);
done(); //return immidiately when watching
} else {
spawnCommand("webpack", params, done);
}
}
Without this functionality gulp was watching a directory which would only be updated when webpack-watch had run. I solved this by updating the watch export as follows:
exports.watch = gulp.series('webpack-watch', watch);
I'm new to gulp and I've got a couple of gulp questions that I hope are pretty easy (meaning I'll probably have one of those forehead smacking moments when I hear the answer)...
My gulpfile has a number of repetitive one-way copy tasks, and then I'm watching these separate tasks in the watch command, however I'm almost certain that the way I'm doing it is totally inefficient.
Also, I'm noticing some interesting behavior, the copy command for syncHtmlRootDir task works exactly as I hoped (it will delete files as necessary), but none of my other one way copy tasks will remove deleted files, and I'm guessing it's a pathing issue, but I'm stumped on it.
gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css')
var uglify = require('gulp-uglify');
var newer = require('gulp-newer');
var path = require('path');
var del = require('del');
function handleError (error) {
console.log(error.toString())
this.emit('end')
}
//setup browerSync to serve from both src and dist directories.
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: ["./", "src"] // ./ signifies root of folder, allows to load files from dist and src folders.
},
})
});
//one way sync of root folder
gulp.task('syncHtmlRootDir', function(done) {
return gulp.src(['src/*.html'])
.pipe(newer('dist/'))
.pipe(gulp.dest('dist/'))
.pipe(browserSync.reload({
stream: true
}))
});
//one way sync of app folder
gulp.task('syncHtmlAppDir', function(done) {
return gulp.src(['src/app/**/*'])
.pipe(newer('dist/app/'))
.pipe(gulp.dest('dist/app/'))
.pipe(browserSync.reload({
stream: true
}))
});
//one way sync of image folder
gulp.task('syncImgDir', function(done) {
return gulp.src(['src/assets/img/**/*'])
.pipe(newer('dist/assets/img/'))
.pipe(gulp.dest('dist/assets/img/'))
.pipe(browserSync.reload({
stream: true
}))
});
//copy and compile SCSS code
gulp.task('compileSass', function() {
return gulp.src('src/assets/css/**/*.scss')
.pipe(sass())
.on('error', handleError)
.pipe(minifyCss())
.pipe(gulp.dest('dist/assets/css'))
.pipe(browserSync.reload({
stream: true
}))
});
//minify JS
gulp.task('uglifyJS', function() {
gulp.src('src/assets/js/**/*.js')
.pipe(uglify())
.on('error', handleError)
.pipe(gulp.dest('dist/assets/js'))
.pipe(browserSync.reload({
stream: true
}))
});
//watch tasks
gulp.task('watch', ['browserSync'], function() {
var rootDir = gulp.watch('src/*.html', ['syncHtmlRootDir']);
rootDir.on('change', function(ev) {
if(ev.type === 'deleted') {
del(path.relative('./', ev.path).replace('src','dist'));
}
});
var appDir = gulp.watch('src/app/**/*', ['syncHtmlAppDir']);
appDir.on('change', function(ev) {
if(ev.type === 'deleted') {
del(path.relative('./', ev.path).replace('src/app/','dist/app/'));
}
});
var imgDir = gulp.watch('src/assets/img/**/*', ['syncImgDir']);
imgDir.on('change', function(ev) {
if(ev.type === 'deleted') {
del(path.relative('./', ev.path).replace('src/assets/img/','dist/assets/img/'));
}
});
var jsDir = gulp.watch('src/assets/js/**/*', ['uglifyJS']);
jsDir.on('change', function(ev) {
if(ev.type === 'deleted') {
del(path.relative('./', ev.path).replace('src/assets/js/','dist/assets/js/'));
}
});
var cssDir = gulp.watch('src/assets/css/**/*', ['compileSass']);
cssDir.on('change', function(ev) {
if(ev.type === 'deleted') {
del(path.relative('./', ev.path).replace('src/assets/css/','dist/assets/css/'));
}
});
});
So I'm 1) looking to combine my repetitive copy tasks into fewer tasks 2)have the delete file function work on all copy tasks and 3) optimize my watch task function to reduce repetition.
p.s., I've also noticed that if I add new files to the watch folders, it won't "recognize" them until I restart the watch command, so my method of syncing isn't exactly bulletproof. =/
Your thoughts are most appreciated.
Thanks!
I've a node script to read meta-tags of mp3 files.
Node
var jsmediatags = require("jsmediatags");
module.exports = function readMeta(file) {
jsmediatags.read(file , {
onSuccess: function(tag) {
return tag;
},
onError: function(error) {
return (':(', error.type, error.info);
}
})
}
I want to use this script in angular app.
Angular
$scope.$watch('currentPlaying', function() {
if(!angular.isUndefined($scope.currentPlaying)){
let url = $scope.currentPlaying.url; //file path
readMeta(url)
}
When I make changes to .jade files I want to Gulp task run only for that file, not for all files. For that I'm using gulp-changed. It's working fine, until I make changes to files that affect to global layout, eg _header.jade, _layout.jade. When I make changes to that files nothing happens. All my layout files have _ before title. How can I solve this issue?
Here is my gulpfile some lines
gulp.task('jade', function() {
return gulp.src('dev/templates/**/!(_)*.jade')
.pipe(plumber({
errorHandler: onError
}))
.pipe(changed('public', {extension: '.html'}))
.pipe(jade({
pretty: true,
}))
.pipe(gulp.dest('public'))
.pipe(browserSync.reload({
stream: true
}));
});
gulp.task('watch', function() {
gulp.watch('dev/templates/**/*.jade', gulp.series('jade'));
});
First thing I would do is to refactor out your jade compilation task into a separate function. That allows you to parameterize your jade compilation so that you can run it on one or more files of your choice:
function compileJade(files) {
return gulp.src(files, {base:'dev/templates'})
.pipe(plumber({
errorHandler: onError
}))
.pipe(jade({
pretty: true,
}))
.pipe(gulp.dest('public'))
.pipe(browserSync.reload({
stream: true
}));
}
Your existing jade task now simply calls that function:
gulp.task('jade', function() {
return compileJade('dev/templates/**/!(_)*.jade');
});
If a changed file is a partial (starts with _) we need to be able to determine which other files are affected by that change. This is facilitated by the jade-inheritance library:
var JadeInheritance = require('jade-inheritance');
var path = require('path');
function isPartial(file) {
return path.basename(file).match(/^_.*/);
}
function findAffectedFiles(changedFile) {
return new JadeInheritance(changedFile, 'dev/templates', {basedir: 'dev/templates'})
.files
.filter(function(file) { return !isPartial(file); })
.map(function(file) { return 'dev/templates/' + file; })
}
Finally whenever a file changes we call the compileJade function for the affected files only:
gulp.task('watch', function() {
gulp.watch('dev/templates/**/*.jade').on('change', function(changedFile) {
return compileJade(isPartial(changedFile) ? findAffectedFiles(changedFile) : changedFile);
});
});