I have a gulp project I inherited.
I am supposed to be migrating gulp v3 to v4.
However, I cannot find a gulpfile.js in this project at all.
Yet, every tutorial requires one. I am assuming there is some setup where the last developer knew about which is probably outdated?
Here is my folder structure:
All tasks are grouped in the Tasks folder. I want to say these exported with the root files which actually run those tasks files are my "gulpfiles".
All gulp tasks are ran using: node platform/build.js or node platform/deploy.js
I can make changes to this and everything, I see how he called it and wrote tasks. But I don't know the paradigm he is using to do this so it's difficult to know where to start migrating this to gulp v4.
Gulp libraries we are using:
"gulp": "3.9.1",
"gulp-autoprefixer": "6.0.0",
"gulp-bundle-assets": "2.29.0",
"gulp-concat": "2.6.1",
"gulp-csso": "3.0.1",
"gulp-data": "1.3.1",
"gulp-ejs": "3.3.0",
"gulp-empty": "0.1.2",
"gulp-eslint": "5.0.0",
"gulp-htmlmin": "5.0.1",
"gulp-if": "2.0.2",
"gulp-imagemin": "5.0.3",
"gulp-rename": "1.4.0",
"gulp-replace": "1.0.0",
"gulp-rimraf": "0.2.2",
"gulp-sass": "3.2.1",
"gulp-sass-lint": "1.4.0",
"gulp-sourcemaps": "2.6.5",
"gulp-string-replace": "1.1.2",
"gulp-strip-comments": "2.5.2",
"gulp-webserver": "0.9.1",
How it runs gulptasks:
// STEP 1 - process.env.NODE_ENV to staging
(!process.env.NODE_ENV) && (process.env.NODE_ENV = 'staging');
// STEP 2 - Prevent from running on NON-CI
if (!process.env.CI) {
throw new Error('Build can only be performed in CI Environment');
}
// START PROCESS
const _ = require('lodash'),
gulp = require('gulp'),
Tasks = require('./tasks'),
runSequence = require('run-sequence').use(gulp),
// This of the tasks here is the order in which they will executed
taskMap = {
'clean:dist': Tasks.cleanDist,
'clean:tmp': Tasks.cleanTemp,
'copy:assets': Tasks.assetCopy,
'bundle': Tasks.bundleAssets,
'transpile': Tasks.transpile,
'prefixCss': Tasks.autoprefixCss,
'sitemap': Tasks.sitemap,
'robots': Tasks.robots,
'remove:htmlext': Tasks.removeHtmlExt
};
// Create all tasks
_.forEach(taskMap, (value, key) => {
gulp.task(key, value);
});
// #todo: Shift to using gulp.series when gulp is upgraded to v4
gulp.series(..._.keys(taskMap))();
A gulpfile is really just a chunk of Javascript code - it's named with a default name so when you run gulp it finds it by default.
You actually have gulpfiles - they're each of those individual .js files you're talking about.
I suspect they were split up this way because somebody thought there were too many tasks in each one and wanted to separate them by "topic" somehow.
I inherited a project that used Gulp with no gulpfile a while back. It turned out it was actually inside of a shared gulpfile which was hosted on npm (like https://github.com/jonathantneal/gulp-config-dev). Long shot, but perhaps it's listed as a dependency in package.json.
Related
I have a simple cli node script that I want to pack using pkg.
I've tried with the following command
host:~ dev$ pkg /Users/dev/Desktop/myscript/ --target node14-macos-x64 node14-linux-x64 node14-win-x64
unfortunately I will get this error in terminal
> pkg#4.4.9
> Error! Not more than one entry file/directory is expected
If I try to remove the target instead, I will get this other error in terminal
> pkg#4.4.9
> Targets not specified. Assuming:
node15-linux-x64, node15-macos-x64, node15-win-x64
> Error! No available node version satisfies 'node15'
In my system I'm running node v15.4.0 so I can't understand what's wrong.
My project package.json file looks like:
{
"name": "myscript",
"version": "1.3.0",
"bin": "index.js",
"dependencies": {
"chalk": "^4.1.0",
"commander": "^7.1.0",
"dotenv": "^8.2.0",
"facebook-chat-api": "^1.8.0",
"forever-monitor": "^3.0.3",
"node-notifier": "^9.0.0"
}
}
How I can pack my app and fix these problems?
Seems like you're missing an s : use --targets instead of --target
pkg can generate executables for several target machines at a time. You can specify a comma-separated list of targets via --targets
https://www.npmjs.com/package/pkg
I am trying to find the best way to package only the node_modules dependencies that my project needs. So I found gulp-npm-dist and have a gulpfile.js
var gulp = require('gulp');
var npmDist = require('gulp-npm-dist');
gulp.task('CopyNodeDependencies', function() {
gulp.src(npmDist(), {base:'./node_modules'})
.pipe(gulp.dest('./node_dependencies'));
});
this places just the modules i need from my package.json:
{
"version": "1.0.0",
"name": "common",
"private": true,
"devDependencies": {
"gulp": "^3.9.1",
"gulp-less": "^3.1.0",
"gulp-npm-dist": "^0.1.2",
"gulp-rename": "^1.2.2",
"pump": "^1.0.1"
},
"dependencies": {
"chart.js": "^2.7.3",
"chartjs-node-canvas": "^2.0.1",
"moment": "^2.24.0"
}
}
but when I run my node file that has var moment = require('moment'); at the top it says cannot find module moment. I have renamed node_dependencies to node_modules and it still throws this error. I have also tried relative paths like ./node_dependencies/moment and that still doesnt work.
here is the folder structure of the node_dependencies if that helps:
You have to leave original node_modules directory as is to use require().
gulp-npm-dist copies only minified files without package.json, yarn.lock etc.
I have a project using Angular.js for which I created some gulp tasks a long while ago. I recently got a new computer and tried to run it but it silently failed (no errors in the log) on my browserify task.
gulp.task('imgs', ['html'], function () {
return gulp.src(paths.img + '*')
.pipe(gulp.dest(paths.dist_img));
});
gulp.task('browserify', ['imgs'], function () {
return browserify(paths.src + 'index.js', {debug: true})
.bundle()
.pipe(source('index.js'))
.pipe(gulpPlugins.rename('bundle.js'))
.pipe(gulp.dest(paths.dist))
.pipe(gulpPlugins.connect.reload());
});
gulp.task('copy-bootstrap-css', ['browserify'], function () {
return gulp.src(paths.custom + "bootstrap/css/*.css")
.pipe(gulp.dest(paths.dist_css));
});
I've been debugging this for a while and noticed it was not failing when I commented out either the rename-pipe or the dest-pipe of the browserify task. Obviously the application is not working correctly when I do. But I couldn't find an actual reason why.
Eventually in complete despair I created a separate variable for the browserify output and then applied the pipes:
gulp.task('browserify', ['imgs'], function () {
var b = browserify(paths.src + 'index.js', {debug: true})
.bundle();
b.pipe(source('index.js'))
.pipe(gulpPlugins.rename('bundle.js'))
.pipe(gulp.dest(paths.dist))
.pipe(gulpPlugins.connect.reload())
return b;
});
Strangely enough that "fixes" it. Meaning that the gulp tasks at least execute completely. The browserify still hasn't run correctly I guess, because I get an "Unexpected end of input" in my browser on the bundle.js, but that might be also be another problem.
Does anyone have an idea why this is "working" when I use a separate variable for the browserify.bundle()?
Any idea whether the remaining problem is related?
Since this might have something to do with versions: I've got the following gulpPlugins in my package.json and am running npm 6.4.1 and node 11.3.0 on my new machine.
"devDependencies": {
"browserify": "^13.1.1",
"chai": "^3.5.0",
"gulp": "^3.9.1",
"gulp-angular-templatecache": "^2.0.0",
"gulp-buffer": "0.0.2",
"gulp-clean": "^0.3.2",
"gulp-connect": "^5.0.0",
"gulp-dest": "^0.2.3",
"gulp-inject": "^4.2.0",
"gulp-load-plugins": "^1.4.0",
"gulp-rename": "^1.4.0",
"gulp-rev-all": "^0.9.7",
"gulp-rev-replace": "^0.4.3",
"gulp-sass": "^3.1.0",
"gulp-streamify": "^1.0.2",
"gulp-util": "^3.0.7",
"http-proxy-middleware": "^0.17.4",
"mocha": "^3.2.0",
"vinyl-source-stream": "^1.1.0"
}
Edit:
When I manually browserify the index.js file this works without problems and the output is a massive file of 64k lines, while the one from my gulp tasks is only 1200.
I restructured the browserify-task and removed the rename, since the filename parameter in the vinyl-source-stream was already doing the renaming, I didn't really need it:
gulp.task('browserify', ['imgs'], function () {
var b = browserify();
b.add(paths.src + 'index.js', {debug: true});
var textStream = b.bundle();
textStream
.pipe(source('bundle.js'))
.pipe(gulp.dest(paths.dist))
.pipe(gulpPlugins.connect.reload())
return b;
});
Note that simply removing the rename pipe and changing the filename of the source pipe didn't do the trick. That resulted in a "no such file or directory" error for some reason. I guess that's why I added the rename pipe in the first place.
I'm working with a legacy app we are slowly dragging forward to more modern libraries, etc. (I say this in advance to try to head off any "just upgrade to webpack/yarn/etc" answers. We're working on it, incrementally.)
Issue summary:
I have successfully included "grunt-babel": "^7.0.0", (I can see it working fine with a test let testBabel = 1 conversion). I also require "babel-polyfill": "^6.26.0"," to handle things like .includes() & Array function, which I have pulled in via my package.json "dependencies" (not "devDependencies", as I was instructed in the docs). My actual issue should be pretty simple: I have no understanding of the proper way to "load this via the entry file" for the set of libraries I am using.
Angular is v1.5
My Setup:
package.json
"devDependencies": {
"babel-core": "^6.26.0",
"babel-preset-env": "^1.6.1",
"grunt": "^0.4.5",
"grunt-babel": "^7.0.0",
"grunt-contrib-concat": "^0.5.1",
"grunt-contrib-copy": "^0.8.0",
"grunt-contrib-sass": "^0.9.2",
"grunt-contrib-uglify": "^0.9.1",
"grunt-contrib-watch": "^0.6.1",
"grunt-shell": "^2.1.0",
"load-grunt-tasks": "^3.5.2"
},
"dependencies": {
"babel-polyfill": "^6.26.0",
"d3-selection-multi": "~1.0.1",
"node-bourbon": "^1.2.3"
}
GruntFile.js
src: [
'./app/vinoEZ/javascripts/__header/jquery/jquery_number.js',
'./app/vinoEZ/javascripts/__header/jquery/hottie.js',
'./bower_components/localforage/dist/localforage.js',
'./bower_components/moment/min/moment.min.js',
'./app/vinoEZ/javascripts/__header/polyfill/entry.js',
'./app/vinoEZ/javascripts/__header/polyfill/eventsource.js',
'./bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js',
'./bower_components/smalot-bootstrap-datetimepicker/js/bootstrap-datetimepicker.js',
'./app/vinoEZ/javascripts/__header/underscore/underscore.js',
'./app/vinoEZ/javascripts/__header/myapp/base.js',
],
dest: './public/javascripts/myapp.head.min.js',
("myapp" is a substitute for our company name). The pollyfill/eventsource.js was existing, and so I have been working with pollyfill/entry.js as some of my experimentation - that may not be needed in the end.
In addition, we have our app.js file with all of our angular.module loading & directive stuff.
What I've tried:
I have tried adding require("babel-polyfill"); as the first line inside my module.exports = function(grunt) { - that seems to be ignored & I've been told that's wrong anyway
I have tried adding require("babel-polyfill"); and import "babel-polyfill"; inside that entry.js, which obviously isn't going to work and doesn't (syntax error as javascript doesn't understand)
I have tried add the same to the top of the angular app.js file but that just blows up my angular.
Really looking for a "write these words here", solve it for me answer, as I'm pretty sure it is a dead simple thing if you know what to type, but I'm at a loss.
TIA!
In the end, seems like a direct link is the easiest way to deal with this, especially as we are slowly upgrading the entire system.
CDN for anyone interested: https://cdn.polyfill.io/v2/docs/
When I try to include braintree-angular into my gulp-angular project, I get the following error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module notecards due to:
Error: [$injector:modulerr] Failed to instantiate module braintree-angular due to:
Error: [$injector:nomod] Module 'braintree-angular' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
I routinely run into issues loading newly install modules in gulp-angular projects, and I believe it comes from a general lack of understanding in how gulp works. The gulp portion of this project was setup by a coworker. If someone could explain why I continue to see issues like this, it would be much appreciated!
I have checked the following:
The module is correctly installed in my /node_modules folder.
The module appears correctly in my package.json.
The entire folder is readable (I've previously had issues with file permissions causing this. This is not the case here.)
The braintree-angular files are not being loaded by gulp.
gulp/server.js
'use strict';
var path = require('path');
var gulp = require('gulp');
var conf = require('./conf');
//var babel = require('gulp-babel');
var browserSync = require('browser-sync');
var browserSyncSpa = require('browser-sync-spa');
var util = require('util');
var proxyMiddleware = require('http-proxy-middleware');
function browserSyncInit(baseDir, browser) {
browser = browser === undefined ? 'default' : browser;
var routes = null;
if (baseDir === conf.paths.src || (util.isArray(baseDir) && baseDir.indexOf(conf.paths.src) !== -1)) {
routes = {
'/bower_components': 'bower_components'
};
}
var server = {
baseDir: baseDir,
routes : routes
};
/*
* You can add a proxy to your backend by uncommenting the line below.
* You just have to configure a context which will we redirected and the target url.
* Example: $http.get('/users') requests will be automatically proxified.
*
* For more details and option, https://github.com/chimurai/http-proxy-middleware/blob/v0.9.0/README.md
*/
// server.middleware = proxyMiddleware('/users', {target: 'http://jsonplaceholder.typicode.com', changeOrigin: true});
browserSync.instance = browserSync.init({
startPath: '/',
server : server,
browser: browser,
host: '192.168.0.20',
https: false,
port : parseInt(process.env.GULP_PORT) || 8684
});
}
browserSync.use(browserSyncSpa({
selector: '[ng-app]'// Only needed for angular apps
}));
gulp.task('serve', ['watch'], function () {
browserSyncInit([path.join(conf.paths.tmp, '/serve'), conf.paths.src]);
});
gulp.task('serve:dist', ['build'], function () {
browserSyncInit(conf.paths.dist);
});
gulp.task('serve:e2e', ['inject'], function () {
browserSyncInit([conf.paths.tmp + '/serve', conf.paths.src], []);
});
gulp.task('serve:e2e-dist', ['build'], function () {
browserSyncInit(conf.paths.dist, []);
});
var gulp = require('gulp');
var webserver = require('gulp-webserver');
gulp.task('webserver', function() {
gulp.src('src')
.pipe(webserver({
host: '0.0.0.0',
livereload: true,
directoryListing: true,
open: true
}));
});
gulpfile.js
/**
* Welcome to your gulpfile!
* The gulp tasks are splitted in several files in the gulp directory
* because putting all here was really too long
*/
'use strict';
var gulp = require('gulp');
var wrench = require('wrench');
/**
* This will load all js or coffee files in the gulp directory
* in order to load all gulp tasks
*/
wrench.readdirSyncRecursive('./gulp').filter(function (file) {
return (/\.(js|coffee)$/i).test(file);
}).map(function (file) {
require('./gulp/' + file);
});
/**
* Default task clean temporaries directories and launch the
* main optimization build task
*/
gulp.task('default', ['clean'], function () {
gulp.start('build');
});
package.json
{
"name": "healthbydna",
"version": "0.0.0",
"dependencies": {
"angular-chart.js": "^1.0.3",
"babel": "^6.5.2",
"braintree-angular": "^1.5.0",
"gulp-babel": "^6.1.2",
"gulp-extend": "^0.2.0",
"gulp-if": "^2.0.0",
"gulp-ng-constant": "^1.1.0",
"jotted": "^1.5.1",
"lazypipe": "^1.0.1"
},
"scripts": {
"test": "gulp test"
},
"devDependencies": {
"babel-core": "^6.21.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-es2016": "^6.16.0",
"browser-sync": "~2.9.11",
"browser-sync-spa": "~1.0.3",
"chalk": "~1.1.1",
"del": "~2.0.2",
"eslint-plugin-angular": "~0.12.0",
"estraverse": "~4.1.0",
"gulp": "^3.9.1",
"gulp-angular-filesort": "~1.1.1",
"gulp-angular-templatecache": "~1.8.0",
"gulp-autoprefixer": "~3.0.2",
"gulp-eslint": "~1.0.0",
"gulp-filter": "~3.0.1",
"gulp-flatten": "~0.2.0",
"gulp-inject": "~3.0.0",
"gulp-load-plugins": "~0.10.0",
"gulp-minify-css": "~1.2.1",
"gulp-minify-html": "~1.0.4",
"gulp-ng-annotate": "~1.1.0",
"gulp-protractor": "~1.0.0",
"gulp-rename": "~1.2.2",
"gulp-replace": "~0.5.4",
"gulp-rev": "~6.0.1",
"gulp-rev-replace": "~0.4.2",
"gulp-sass": "~2.0.4",
"gulp-size": "~2.0.0",
"gulp-sourcemaps": "~1.6.0",
"gulp-uglify": "~1.4.1",
"gulp-useref": "~1.3.0",
"gulp-util": "~3.0.6",
"gulp-webserver": "^0.9.1",
"http-proxy-middleware": "~0.9.0",
"karma": "~0.13.10",
"karma-angular-filesort": "~1.0.0",
"karma-coverage": "~0.5.2",
"karma-jasmine": "~0.3.6",
"karma-ng-html2js-preprocessor": "~0.2.0",
"karma-phantomjs-launcher": "~0.2.1",
"lodash": "~3.10.1",
"main-bower-files": "~2.9.0",
"phantomjs": "~1.9.18",
"uglify-save-license": "~0.4.1",
"wiredep": "~2.2.2",
"wrench": "~1.5.8"
},
"engines": {
"node": ">=0.10.0"
}
}
Gulp is just a (very powerful) task runner, plain and simple. It does things you could do yourself, but you don't have the time for ;)
Node modules are not the same thing as Angular modules. Node modules have a broad scope and are for running general purpose code in the Node.js platform. That is, Javascript that runs outside of the typical web-browser setting. For example a desktop application, a loan calculator, a web server, a chat program, etc.
However, many Node modules are specifically for use with Angular and have a Bower counter-part. Bower packages are, indeed, for including directly in your webpage:
<script src="./bower_components/path/to/script.js" type="text/javascript"></script>
Why is there both a Node module AND a Bower package for a web module, you might ask? That's because of bundlers like Browserify and Webpack that let you actually use Node modules in your webpage. It does not appear that your project is setup for a bundler.
You want to either get the compiled js for your module (ideally by modifying your gulpfile to compile and/or concatenate the correct JS file from the node module's folder) or use Bower to download the already compiled JS, and modify the gulp file to include it into the concatenation process.
There are multiple files that make up the Gulp process for your project. Look for the 'build' task in one of those files. It should include the details about how vendor JS files are built. You want to modify it so that it is including the path to braintree-angular's JS file (if it exists)
Okay, the fix to this very specific issue was to remove braintree-angular from node_modules and install it via bower. I also need to lock the version to v1.3.0. I am unsure why this fixed it, so an explanation would be great :)
Gulp has nothing to do with Angular modules. From tasks you have published it is only used for localhost development and build not for any dependency injection.
Your problem is probably coming from not requiring dependency for module. You app.module should look something like this.
angular.module('app', [
'angular-svg-round-progress'
]);
And also make sure module is loaded before your app else instantiation will fail.