Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Concatenate files with npm as build tool

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/**"
  }
}
like image 203
Web Dev T Avatar asked Jan 28 '16 03:01

Web Dev T


People also ask

Is npm a build tool?

Using npm as a build tool is all about working in the package. json file and creating custom scripts in the scripts object of file, so that is where we will spend most of our time.

What is npm build used for?

The npm build is used to build a package, the synopsis is given in the next section. where <package-folder> is a folder that contains a package. json in its root. This is the plumbing command that is called by npm link and npm install.

How does npm run build work?

npm run build creates a build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served index. html , and requests to static paths like /static/js/main.

What is npm run build DLL?

npm build is an internal command and is called by link and install commands, according to the documentation for build: This is the plumbing command called by npm link and npm install. You will not be calling npm build normally as it is used internally to build native C/C++ Node addons using node-gyp.


3 Answers

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

like image 76
vorant Avatar answered Oct 12 '22 23:10

vorant


You can also use the power of the shell to do what you want:

"scripts": {
  "concat": "cat www/js/**/*.js > all.js"},
like image 36
yagni Avatar answered Oct 13 '22 00:10

yagni


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");
like image 2
Ben Avatar answered Oct 13 '22 00:10

Ben