Concatenate files with npm as build tool - javascript

I recently discovered that I can use npm as a task runner instead of gulp or grunt, everything is fantastic so far (lint, stylus, jade, uglify, watch .. etc) but the concatenation part, I cannot seem to achieve that. With gulp it was something like:
gulp.task('scripts', function() {
return gulp.src('www/js/**/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('www/dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('www/dist'));
});
Is there a way I can do that with npm?
To be more clear, my goal is to do something like this:
// package.json
{
"name": "f_todo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"author": "",
"license": "MIT",
"devDependencies": {
"concat": "^1.0.0",
"rerun-script": "^0.6.0",
"stylus": "^0.53.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"stylus": "stylus ss --compress --out lib/stylesheets",
"concat": "concat dependency code would be here",
"dev": "rerun-script"
},
"watches": {
"stylus": "ss/**"
}
}

try this
var concat = require('concat')
concat(['a.css', 'b.css', 'c.css'], 'all.css')
https://www.npmjs.com/package/concat
and don't forget about npm install concat
By command
use concat-glob-cli
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"concat": "concat-glob-cli -f path/to/**/*.js -o bundle.js",
...
},
https://www.npmjs.com/package/concat-glob-cli

You can also use the power of the shell to do what you want:
"scripts": {
"concat": "cat www/js/**/*.js > all.js"},

Yep, concat is gone. I was looking at this as well while moving away from gulp to pure node and found the package to be missing.
As an alternative I am now using buildify.
Might be a slight overkill, but it works.
var buildify = require('buildify');
var files = [
"./node_modules/moduleA/file1.js",
"./node_modules/moduleB/file2.js",
];
buildify()
.concat(files)
.save("./dist/www/scripts/init.min.js");

I am using concat-files
And I noticed there's also concatenate-files
Both are pretty simple.
Also note writing your own is pretty simple too:
var output = files.map((f)=>{
return fs.readFileSync(f).toString();
}).join(';')
fs.writeFileSync('dist/bundle.js', output)

The concat package is no longer available. I would suggest using concat-with-sourcemaps
https://www.npmjs.com/package/concat-with-sourcemaps
var concat = new Concat(true, 'all.js', '\n');
concat.add(null, "// (c) John Doe");
concat.add('file1.js', file1Content);
concat.add('file2.js', file2Content, file2SourceMap);
var concatenatedContent = concat.content;
var sourceMapForContent = concat.sourceMap;

Related

cant import module from webpack bundle.js in script tag HTML

I use webpack for make bundler my js file for use in my django project. I use moment js which i get from "npm i moment". I make webpack with this configuration.
var path = require('path');
module.exports = {
"mode" : "development",
"entry" : "./index.js",
"output" : {
"path" : path.resolve(__dirname, "tugas/assets"),
"filename" : "bundles.js",
"clean" : true,
},
};
and this is my index.js for configuration before.
import moment from 'moment';
console.log(moment().format('MMMM Do YYYY, h:mm:ss a'));
console.log("boma1");
This is my package.json.
{
"name": "Aplikasi-Database-Django",
"version": "1.0.0",
"description": "Tugas UAS Database Semester 7 2020",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/simasona123/Aplikasi-Database-Django.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/simasona123/Aplikasi-Database-Django/issues"
},
"homepage": "https://github.com/simasona123/Aplikasi-Database-Django#readme",
"devDependencies": {
"webpack": "^5.31.2",
"webpack-cli": "^4.6.0"
},
"dependencies": {
"chart.js": "^3.1.0",
"moment": "^2.29.1"
}
}
as i know, webpack success to make bundle of moment.js because console can make output
but from above picture i cant import moment.js
this is my html code
This is my tree directory.
Thanks for your help... sorry for my bad question....
You should use require for moment.js, so replace what you have for the import with:
const moment = require('moment');
Alternatively, if you want to still use the import statement, this should work as well:
import * as moment from 'moment';
There's a discussion of this already here.

Run a mocha test?

Good evening, i am learning about testing and have installed mocha. I have a basic test that just compares 2 numbers and i cant get it to run. could anyone explain to me why and how to fix this?
Json
{ "scripts": {
"test": "mocha test/**/*.js"
},
"name": "image-gallery",
"version": "1.0.0",
"description": "",
"main": "script-test.js",
"directories": {
"test": "script-test.js"
},
"author": "",
"license": "ISC"
}
Test.js
const assert = require('assert');
describe('number test', function() {
it('matching numbers', function() {
assert.ok(2 === 2);
});
});
Did you install mocha by running this in your project directory?
npm install --save-dev mocha

Using d3-tip with npm: "Uncaught TypeError: Cannot read property 'node' of undefined"?

I've installed d3": "^3.5.17" and "d3-tip": "^0.7.1" using npm (d3-tip documentation). Then in my index.js file I have this code:
var d3 = require('d3');
var d3tip = require('d3-tip')(d3);
console.log('d3 version', d3.version);
var tip = d3tip().attr('class', 'd3-tip').html(function(d) { return "hello world"; })
But when I build the index file with browserify and load it in the browser, I see an error from the var tip line:
index.js:247 Uncaught TypeError: Cannot read property 'node' of undefined
This is coming from this function in the d3-tip source code:
function getSVGNode(el) {
el = el.node()
if(el.tagName.toLowerCase() === 'svg')
return el
return el.ownerSVGElement
}
It looks like this function is expecting a node to be passed to it? But where would this come from?
The build itself does not throw any errors, and I think I'm requiring d3-tip correctly, as per this question. The console statement shows d3 version 3.5.17, as expected.
UPDATE: Here's my package.json file:
{
"name": "myapp",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "watchify index.js -o main.js --debug --verbose",
"build": "browserify index.js | uglifyjs > main.min.js"
},
"dependencies": {
"d3": "^3.5.17",
"d3-tip": "^0.7.1",
"datatables.net": "^1.10.12",
"datatables.net-bs": "^1.10.12"
},
"devDependencies": {
"uglifyjs": "^2.4.10",
"watchify": "^3.2.1"
}
}
And I installed the files with npm install.
This was happening because I was trying to use the latest version of d3-tip (which requires v4 of D3) with v3 of D3.
Reverting to older versions of both fixed things:
"d3": "^3.5.17",
"d3-tip": "^0.6.7"
Your line
var tip = d3tip().attr('class', 'd3-tip').html(function(d) { return "hello world"; })
must be
var tip = d3.tip().attr('class', 'd3-tip').html(function(d) { return "hello world"; })
You can check my implementation #:
Source (Lines: 17, 91, 333-339, 685-692)
Demo
The problem is your line:
var d3tip = require('d3-tip')(d3);
You should not be calling d3.tip(foo) with the d3 reference itself, but with a d3 selection (which it can then invoke .node() on).
I think this should probably be:
d3.tip = require('d3-tip');

Error when running gulp for transcompiling es6 to es5

I have a simple javascript file like this:
'use strict';
const sentences = [
{subject: 'Javascript', verb: 'is', object: 'great'}
{subject: 'Elephants', verb: 'are', object: 'large'}
];
function say ({subject, verb, object}){
console.log(`${subject} ${verb} ${object}`);
}
for(let s of sentences){
say(s);
}
And i`ve installed gulp for transcompiling purposes. Here's my gulp file:
const gulp = require('gulp');
const babel = require('gulp-babel');
gulp.task('default', function(){
gulp.src("es6/**/*.js").pipe(babel()).pipe(gulp.dest("dist"));
gulp.src("public/es6/**/*.js").pipe(babel()).pipe(gulp.dest("public/dist"));
});
My javascript file is inside a 'es6' and a 'public/es6' folders. So when i run the gulp command, it should work, but it gives me these errors instead:
Joaos-MacBook-Air:chapter2 joaovictor$ gulp
[12:44:06] Using gulpfile ~/Desktop/javascript/chapter2/gulpfile.js
[12:44:06] Starting 'default'...
[12:44:06] Finished 'default' after 12 ms
events.js:141
throw er; // Unhandled 'error' event
^
SyntaxError: /Users/joaovictor/Desktop/javascript/chapter2/.babelrc: Error while parsing JSON - Unexpected ''
at JSON5.parse.error (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/node_modules/json5/lib/json5.js:50:25)
at JSON5.parse.word (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/node_modules/json5/lib/json5.js:378:13)
at JSON5.parse.value (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/node_modules/json5/lib/json5.js:478:56)
at Object.parse (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/node_modules/json5/lib/json5.js:491:18)
at OptionManager.addConfig (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/file/options/option-manager.js:225:62)
at OptionManager.findConfigs (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/file/options/option-manager.js:436:16)
at OptionManager.init (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/file/options/option-manager.js:484:12)
at File.initOptions (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/file/index.js:223:65)
at new File (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/file/index.js:140:24)
at Pipeline.transform (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
What am i missing here?
I think some of the packages were not installed or compatible, regardless of that, you should make sure all dev-dependencies are installed , source code are available on Babel documentation website [https://babeljs.io/setup];
so your package.json file and .baberlc file should look like this:
{
"name": "nu",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.2.2",
"#babel/preset-env": "^7.2.3",
"gulp": "^4.0.0",
"gulp-babel": "^8.0.0-beta.2"
}
}
{
"presets": ["#babel/preset-env"]
}
so run your code...it should work just fine!!!

Grunt: Task "default" not found

I am trying to set up some simple Grunt tasks but upon running them I get a Warning in the terminal "Warning: Task "default" not found.
I have simplified the gruntfile down to just one task, to reduce the chance this was caused by syntax errors but I am still getting the same warning...
gruntfile.js
exports.module = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
build: {
files: {
'/public/scripts/test.min,js' : ['/public/scripts/test.js']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']);
};
package.json
{
"name": "CustomersCRUD",
"version": "0.0.1",
"description": "Customer CRUD Application",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Dan Hutchinson",
"license": "ISC",
"dependencies": {
"express": "^4.6.1",
"serve-favicon": "^2.0.1"
},
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-uglify": "^0.5.0"
}
}
warning given
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.
Many thanks!
Okay, didn't catch this before but it's module.exports not exports.module
That should fix it. Also, I don't believe your file references need a / before them.
I see a comma here: '/public/scripts/test.min,js'
Could that be your issue?

Categories

Resources