I have one file, app.ts under my scripts folder, that gets copied to wwwroot/scripts by a gulp task. After the gulp task runs, I now also have a wwwroot/scripts/app.ts file, in which the sole function is red-underlined as duplicate. Is this normal, or is my gulp task, below, declared incorrectly?
var paths = {
scripts: ["scripts/**/*.js", "scripts/**/*.ts", "scripts/**/*.map"]
};
gulp.task("default", function() {
gulp.src(paths.scripts).pipe(gulp.dest("wwwroot/scripts"));
});
I see the raw app.ts file, from the root scripts folder also gets built into *.js and *.js.map files. Could this have something to do with the 'false positive' duplicate function?
Don't copy the .ts files. You only need the compiled .js files in the scripts directory (unless you are doing something unusual with TypeScript source from there).
Then in your tsconfig.json file, add an exclude directive to exclude wwwroot/scripts/**/* in your IDE.
//VSCODE
This is an issue from VSCode. To fix it execute the following command
tsc --init
//to initialize the tsconfig.json in the folder.
//VISUAL STUDIO
In order to prevent functions to be in global scope, you can add export {}; on top (or just export this function):
// 1.ts
export {};
function test(){
console log("File 1 Error");
}
// 2.ts
export {};
function test(){
console.log("File 2 Error");
}
1- When you call glup with 2 references to the same code the .ts and .js he is going to transpila .. the .ts in to .js soo that's why you have 2 files.
You can try this:
var paths = {
scripts: ["scripts/**/*.js", "scripts/**/*.map"]
};
gulp.task("default", function() {
gulp.src(paths.scripts).pipe(gulp.dest("wwwroot/scripts"));
});
You need to generate a tsconfig.json file. You can generate the file using a simple command. Open terminal and type "tsc -init".
Related
So I'm using Laravel 5.4 and I use webpack to compile multiple .js files in 1 big js file.
const { mix } = require('laravel-mix');
// Compile all CSS file from the theme
mix.styles([
'resources/assets/theme/css/bootstrap.min.css',
'resources/assets/theme/css/main.css',
'resources/assets/theme/css/plugins.css',
'resources/assets/theme/css/themes.css',
'resources/assets/theme/css/themes/emerald.css',
'resources/assets/theme/css/font-awesome.min.css',
], 'public/css/theme.css');
// Compile all JS file from the theme
mix.scripts([
'resources/assets/theme/js/bootstrap.min.js',
'resources/assets/theme/js/app.js',
'resources/assets/theme/js/modernizr.js',
'resources/assets/theme/js/plugins.js',
], 'public/js/theme.js');
This is my webpack.mix.js to do it (same for css). But I want to get something like: resources/assets/theme/js/* to get all files from a folder. So when I make a new js file in the folder that webpack automatically finds it, and compile it when I run the command.
Does someone know how to this?
Thanks for helping.
If anyone wants the code to compile all sass/less/js files in a directory to a different directory with the same filename you can use this:
// webpack.mix.js
let fs = require('fs');
let getFiles = function (dir) {
// get all 'files' in this directory
// filter directories
return fs.readdirSync(dir).filter(file => {
return fs.statSync(`${dir}/${file}`).isFile();
});
};
getFiles('directory').forEach(function (filepath) {
mix.js('directory/' + filepath, 'js');
});
Wildcards are actually allowed using the mix.scripts() method, as confirmed by the creator in this issue. So your call should look like this:
mix.scripts(
'resources/assets/theme/js/*.js',
'public/js/theme.js');
I presume it works the same for styles, since they use the same method to combine the files.
Hope this helps you.
I created a custom JavaScript file with a simple function:
function picture(soemthing){
document.getElementById('idXYZ').src = "example.com";
}
Then I added this file to the webpack.mix.js config:
mix.js(['resources/assets/js/app.js', 'resources/assets/js/xyz.js'], 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
and run: npm run dev. npm compiled my script and the picture function was included in the app.js file. Now I'd like to use the "picture" function in a blade.php but whenever I call it I get "Uncaught ReferenceError: picture is not defined". I checked the page source and found that the picture function is wrapped with a different function
(function(module, exports) {
function picture(soemthing) {
document.getElementById('idXYZ').src = "example.com";
}
})
Should I add some additional namespace before calling the picture function from blade.php or I have something wrong with mix configuration?
The functions and classes are not exposed to the public, so all JavaScript logic should be written in the JS files.
If you insist on writing JavaScript logic in the blade file, you could attach the function to the window object.
window.picture = function picture(soemthing){
document.getElementById('idXYZ').src = "example.com";
}
...
window.picture()
I've written a gulp task to rename files so that they can be versioned. The problem is that the filenames of the files that the index.html scripts reference are not changed.
For example, in my index.html:
<script src=pub/main_v1.js"></script>
But if you actually navigate through the build folder to the subdirectory pub, you will find main.js.
Here is the custom gulp task:
const gulpConcat = require('gulp-concat');
const gulpReplace = require('gulp-replace');
const version = require('./package.json').version;
gulp.task('version', function () {
var vsn = '_' + version + '.js';
gulp.src('scripts/**/*.js')
.pipe(gulpConcat(vsn))
.pipe(gulp.dest('./prodBuild'));
return gulp.src('./prodBuild/index.html', { base: './prodBuild' })
.pipe(gulpReplace(/* some regex */, /* append vsn */))
.pipe(gulp.dest('./prodBuild'));
});
What do I need to fix/add so that the original filename changes to match that in the script tag?
Note: According to the gulp-concat docs, I should be able to find the concated files at prodBuild/[vsn], where [vsn] is _v1.js. However, it is no where to be found.
Update: The files rename properly in index.html, but I can't seem to get the renaming of the original files to work. Here's a snapshot of my build directory:
prodBuild/
pub/
main.js
someDir/
subDirA/
// unimportant stuff
subDirB/
file2.js
file3.js
// ...other files and folders...
EDIT:
The issue is that you return only one of the two tasks. The first task is simply ignored by gulp, since it is not returned. A simple solutions: Split it into two tasks, and reference the one from the other, like in this SO answer.
Old Answer
This looks like a perfect case for the gulp-rename. You could simply pipe your scripts through gulp-rename, like this:
.pipe(rename(function (path) {
path.basename += vsn;
path.extname = ".js"
}))
Gulp concat is, AFAIK, made for the concatination of files, not particularly for the renaming of them.
I need to deploy an Ionic Project, where the Main Developer has left the company and there is no documentation whatso ever left. The problem I have is, that there are Typescript Files, but no Typescript Compiler defined or used in Gulp or anything.
So he probably used a local compiler to do this.
I installed the 1.5.3 Version of Typescript via npm. And my goal was to recursively compile all the files in one directory to one Javascript-File.
What I found online is, to use:
tsc *.ts --out app.js
However I always get the Error:
error TS6053: File '*.ts' not found.
When I compile a single File it works. And I tried it in different terminals.
EDIT: I need to add I have a map.js File of the target app.js. So I know what I need to compile. Is there a way or tool to reverse engineer using this map file?
EDIT2: Example of a File:
/// <reference path="./util.ts"/>
///
module al.driver {
/**
* local machine: false
* smartphone: true
*/
export let cordova = true;
export interface IPreLoadData {
date:Date;
id:String;
}
export var preLoadData: IPreLoadData = {
date:Date,
id:String
}
// event conditions
var docReady = false;
var devReady = false;
// Document ready listener
$(document).ready(function() {
console.info("document ready");
docReady = true;
bootstrapApplication();
});
// Initialize Application
function bootstrapApplication() {
if (docReady && devReady) {
angular.bootstrap(document, ["test"]);
}
}}
I am using Browserify to compile a large Node.js application into a single file (using options --bare and --ignore-missing [to avoid troubles with lib-cov in Express]). I have some code to dynamically load modules based on what is available in a directory:
var fs = require('fs'),
path = require('path');
fs.readdirSync(__dirname).forEach(function (file) {
if (file !== 'index.js' && fs.statSync(path.join(__dirname, file)).isFile()) {
module.exports[file.substring(0, file.length-3)] = require(path.join(__dirname, file));
}
});
I'm getting strange errors in my application where aribtrary text files are being loaded from the directory my compiled file is loaded in. I think it's because paths are no longer set correctly, and because Browserify won't be able to require() the correct files that are dynamically loaded like this.
Short of making a static index.js file, is there a preferred method of dynamically requiring a directory of modules that is out-of-the-box compatible with Browserify?
This plugin allows to require Glob patterns: require-globify
Then, with a little hack you can add all the files on compilation and not executing them:
// Hack to compile Glob files. Don´t call this function!
function ಠ_ಠ() {
require('views/**/*.js', { glob: true })
}
And, for example, you could require and execute a specific file when you need it :D
var homePage = require('views/'+currentView)
Browserify does not support dynamic requires - see GH issue 377.
The only method for dynamically requiring a directory I am aware of: a build step to list the directory files and write the "static" index.js file.
There's also the bulkify transform, as documented here:
https://github.com/chrisdavies/tech-thoughts/blob/master/browserify-include-directory.md
Basically, you can do this in your app.js or whatever:
var bulk = require('bulk-require');
// Require all of the scripts in the controllers directory
bulk(__dirname, ['controllers/**/*.js']);
And my gulpfile has something like this in it:
gulp.task('js', function () {
return gulp.src('./src/js/init.js')
.pipe(browserify({
transform: ['bulkify']
}))
.pipe(rename('app.js'))
.pipe(uglify())
.pipe(gulp.dest('./dest/js'));
});