Gulp doesn't work on Ubuntu 16.04 [duplicate] - gulp

As shown in the screen shot below I am not able to run gulp to concat the JavaScript files. Its saying that gulp is not defined.
I have tried the following commands:
npm install -g gulp
npm install gulp
npm install gulp --save-dev
I have also set the environment variables as following:
C:\Users\<user>\AppData\Roaming\npm;C:\Python27;C:\Users\<user>\AppData\Roaming\npm\node_modules;C:\Users\<user>\AppData\Roaming\npm\node_modules\gulp;
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
//script paths
var jsFiles = 'scripts/*.js',
jsDest = 'dist/scripts';
gulp.task('scripts', function() {
return gulp.src(jsFiles)
.pipe(concat('scripts.js'))
.pipe(gulp.dest(jsDest));
});

you just need to install and require gulp locally, you probably only installed it globally
At the command line
cd <project-root> && npm install --save-dev gulp
In your gulpfile.js
var gulp = require('gulp');
this is a different dependency than the command line dependency (that you installed globally). More specifically, it is the same NPM package, but the command line program will execute code usually from a different entry point in the NPM package then what require('X') will return.
If we go to the package.json file in the Gulp project on Github, it will tell the whole story:
{
"name": "gulp",
"description": "The streaming build system",
"version": "3.9.1",
"homepage": "http://gulpjs.com",
"repository": "gulpjs/gulp",
"author": "Fractal <contact#wearefractal.com> (http://wearefractal.com/)",
"tags": [ ],
"files": [
// ...
],
"bin": {
"gulp": "./bin/gulp.js"
},
"man": "gulp.1",
"dependencies": {
// ...
},
"devDependencies": {
// ...
},
"scripts": {
"prepublish": "marked-man --name gulp docs/CLI.md > gulp.1",
"lint": "eslint . && jscs *.js bin/ lib/ test/",
"pretest": "npm run lint",
},
"engines": {
"node": ">= 0.9"
},
"license": "MIT"
}
so at the command line:
$ gulp default
will execute this:
"bin": {
"gulp": "./bin/gulp.js"
},
on the other hand, require('gulp') in your code will return the value of this:
https://github.com/gulpjs/gulp/blob/master/index.js
normally we see this in a package.json file as:
"main": "index.js"
but since this is the default, they just omitted it (which is dumb IMO, better to be explicit, but they aren't the first project I have seen take the lame shorthand route.).

Its occurs on Windows and usually one of the following fixes it:
If you didn't, run npm install gulp on the project folder, even if
you have gulp installed globally.
Normally, It isn't a problem on Windows, but it could be a issue with
the PATH. The package will try to get the PATH from the environment,
but you can override it by adding exec_args to your gulp settings.
For example, on Ubuntu:
"exec_args": {
"path": "/bin:/usr/bin:/usr/local/bin"
}
Hope It will be OK.
Source: https://github.com/NicoSantangelo/sublime-gulp/issues/12

Related

Custom local npm module as dependency

I created a project using npm scripts in order to avoid the use of gulp. The thing is, my project has two scripts:
prepare.sh (uses wget to download some files and do mkdirs)
process.js (transform a json file into another overriding some keys)
package.json
{
"scripts": {
"process": "./process.js",
"prepare": "./prepare.sh $npm_package_config_source $npm_config_env",
"config": "npm run prepare && npm run process"
},
"config": {
"source": "https://myurl"
},
"devDependencies": {
"fs": "0.0.1-security",
"json-override": "^0.2.0"
}
}
So, if I want to apply the transform in this project I run npm run config, but I want this project to be part of another as a local module of a front-end project.
How can I set up my project? And when I add it as a dependency of my front project, how can I call the config script from the package.json of the front project?
You can add a bin object to your package.json which will result in files installed into the node_modules/.bin folder docs.npmjs.com/files/package.json#bin
example
{
"bin": {
"process": "./process.js",
"prepare": "./prepare.sh"
},
"scripts": {
"config": "prepare && process"
},
"devDependencies": {
"fs": "0.0.1-security",
"json-override": "^0.2.0"
}
}
Also since npm runs scripts with node_modules/.bin as part of the path you can simply call them by name only. Just remember to add #!/usr/bin/env node to the top of process.js

Spectron testing producing a JScript syntax error

I'm trying to test out spectron for electron in terms of testing but as I'm going through a tutorial, I keep getting this error message whenever I run npm run test:e2e. My test file syntactically correct but im not sure why i run into an error through compilation
Specs:
Nodejs 6.10.3
Electron 1.6.1
here's the error message
here's the json file package.json
{
"name": "your-app",
"version": "0.1.0",
"main": "main.js",
"scripts": {
"start": "C:/Users/Livs/Documents/imdc/logger/node_modules/.bin/electron .",
"test:e2e": "C:/Users/Livs/Documents/imdc/logger/test.js"
},
"devDependencies": {
"electron-chromedriver": "^1.7.1",
"electron-prebuilt": "^1.4.13",
"electron-rebuild": "^1.5.11",
"chai": "^3.5.0",
"chai-as-promised": "^5.3.0",
"electron": "^1.3.4",
"mocha": "^3.0.2",
"spectron": "^3.4.0"
}
}
Heres the testing file test.js
const Application = require('spectron').Application;
const path = require('path');
const chai = require('chai');
const chaiAsPromised = require('chai-as-promised');
var electronPath = path.join(__dirname, '..', 'node_modules', '.bin', 'electron');
if (process.platform === 'win32') {
electronPath += '.cmd';
}
var appPath = path.join(__dirname, '..');
var app = new Application({
path: electronPath,
args: [appPath]
});
Your npm run e2e just calls the test.js file. You'll need a test runner, mocha for instance. Then you would run mocha test.js. Or change the e2e script inside package.json to run that command.
All your file paths for the scripts inside package.json should be relative to the package root, ie logger/test.js. Regarding the npm bins you only need to type the bin name, ie electron.
To solve your problem you should change your package.json test:e2e command to mocha test.js.
(You can also change your start command to electron . since custom npm commands will always look for binaries in ./node_modules/.bin

How to use Polymer for live-reloading of code

I am using Polymer and reloading changes in files manually. So I tried using using browser-sync and also browser-sync with gulp but not able to succeed.
I tried two following ways :
1) npm scripts in package.json
"scripts": {
"dev": "polymer serve | npm run watch",
"watch": "browser-sync start --proxy localhost:8080 --files 'src/*.html, src/*.js, images/*' "
},
Running it using npm run dev ,it ran but not able to detect the changes in the file.
2) Using gulp with browser-sync
var gulp = require('gulp');
var bs = require('browser-sync').create();
gulp.task('browser-sync', function() {
bs.init({
port : 5000,
proxy: {
target : "localhost:8080"
}
});
});
gulp.task('watch', ['browser-sync'], function () {
gulp.watch("*.html").on('change', bs.reload);
});
It also ran but not able to detect the changes in *.html file which is present in src folder.
Can anybody help me why changes of files not being detected.
I figured it myself, i was doing one small mistake in npm scripts. I have modified as :
"scripts": {
"dev": "polymer serve --port 8081 | npm run watch",
"test": "polymer test",
"watch": "browser-sync start --proxy localhost:8081 --files \"src/**/*.*, index.html, *.js\""
},
Now it is working fine !!

How do I save all the dependencies I install through npm into my package.json file?

I ran npm install for a lot of packages, but I forgot to include the --save argument. Now when I try to deploy on Heroku I get errors for missing certain dependencies. How can I automatically add those dependencies to my package.json file without doing npm install --save for each one?
You can add all installed packages not installed with --save to your package.json automatically by calling npm init. It will append the dependencies to your existing ones. No settings in your file should be lost. Still don't forget to make a backup of the file to be 100% secure!
If the dependencies have not been appended, it can happen that just the merging failed:
Backup your existing package.json in order to keep the dependencies you have in your package.json already and all the other settings. We need this file later again.
Delete the package.json and run npm init in order to create a new package.json including the modules installed without --save in dependencies.
Merge the dependencies of your newly created package.json into your old one manually. Restore your merged package.json.
Someone already wrote a script for this.
Go to following link
stackoverflow link
here is complete code
run this code inside your project folder
var fs = require("fs");
function main() {
fs.readdir("./node_modules", function (err, dirs) {
if (err) {
console.log(err);
return;
}
dirs.forEach(function(dir){
if (dir.indexOf(".") !== 0) {
var packageJsonFile = "./node_modules/" + dir + "/package.json";
if (fs.existsSync(packageJsonFile)) {
fs.readFile(packageJsonFile, function (err, data) {
if (err) {
console.log(err);
}
else {
var json = JSON.parse(data);
console.log('"'+json.name+'": "' + json.version + '",');
}
});
}
}
});
});
}
main();
It will print all the dependencies inside node_module folder as given below.
"ansi-regex": "2.0.0",
"ansi-styles": "2.2.1",
"asn1": "0.2.3",
"assert-plus": "0.2.0",
"asynckit": "0.4.0",
"aws-sign2": "0.6.0",
"bcrypt-pbkdf": "1.0.0",
"aws4": "1.4.1",
"bindings": "1.2.1",
"bl": "1.1.2",
"boom": "2.10.1",
"caseless": "0.11.0",
"chalk": "1.1.3",
"combined-stream": "1.0.5",
"core-util-is": "1.0.2",
"compress": "0.99.0",
"commander": "2.9.0",
"cryptiles": "2.0.5",
"delayed-stream": "1.0.0",
"dashdash": "1.14.0",
"debug": "0.7.4",
"ecc-jsbn": "0.1.1",
"ejs": "2.3.4",
"escape-string-regexp": "1.0.5",
copy and paste inside your package.json json as follow
{
"name": "test",
"version": "1.0.0",
"main": "server.js",
"dependencies": {
//paste above printed data here
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"description": ""
}

How to omit devDependencies when copying node_modules?

I'd like to copy only modules, which are important for application - those located inside dependencies in package.json. I'd like to omit those under devDependencies.
package.json
{
"dependencies": {
"express": "^4.13.4",
"log4js": "^0.6.33"
},
"devDependencies": {
"gulp": "^3.9.1",
"gulp-rename": "^1.2.2",
"gulp-typescript": "^2.12.1",
"typings": "^0.7.9",
"yargs": "^4.3.2"
}
}
gulpfile.js
gulp.task('copy_packages', function() {
gulp
.src('node_modules/**/*.*')
.pipe(gulp.dest('../release/node_modules'));
});
Is there any module or a smart way to distinguish which modules belongs to dependencies group and which to devDependencies?
Had the same problem...felt weird this was not considered when gulp was created.
My work around was using child_process to run npm install and specify a directory to put the node_modules directory with only the packages you need for your application.
e.g:
gulp.task('createDeployNodeModulesFolder', function(cb) {
spawn('"npm"', ['install', '--prefix', './dist/', 'package1', 'package2'], {stdio: 'inherit', shell: true}, function (err, stdout, stderr) {
console.log(stdout);
console.log(stderr);
})
.on('close', cb);
});
In your case you want only the production dependencies so you can likely use:
npm install --prefix /deployDir/ --only=prod
There will be some warnings complaining about no package.json..etc., but those are just warnings. If you really want to get rid of them, I guess you can just add a task to copy or create a package.json into the deploy directory before running npm install.
Node.js allows you to require() JSON files which will be returned as simple JavaScript objects. You can use that to only pass those modules to gulp.src() that appear under dependencies in your package.json file:
var gulp = require('gulp');
var packageJson = require('./package.json');
gulp.task('copy_packages', function() {
var modules = Object.keys(packageJson.dependencies);
var moduleFiles = modules.map(function(module) {
return 'node_modules/' + module + '/**/*.*';
});
return gulp.src(moduleFiles, { base: 'node_modules' })
.pipe(gulp.dest('../release/node_modules'));
});
use distize https://www.npmjs.com/distize .
npx distize --no-files -o {targetpath}