I'm creating a generator with yeoman and I have a small issue.
Basically my generator will be abble to create a module structure like that :
nameofmodule
classes
controllers
nameofmodule.php
When I execute my generator I'm in the parent folder of nameofmodule (nameofmodule folder is created by the generator).
Now I would like to save a yo-rc.json file to save some configurations (as the module name).
The issue is that I would like the yo-rc.json file to be in the nameofmodule folder and not in the folder where I've initiated the yeoman generator.
Do you know how I could change the yo-rc.json file path ? Or maybe create a new one in nameofmodule ?
Thanks a lot
I managed to change .yo-rc.json path by changing destination root path:
this.destinationRoot(path.join(this.destinationRoot(), '/' + this.appDir));
So after I created my app structure I called:
this.on('end', function () {
this.destinationRoot(path.join(this.destinationRoot(), '/' + this.appDir));
this.config.set('appName', this.appName);
this.config.set('appDir', this.appDir);
this.config.set('modules', []);
});
Right now it works for me only with Base generator. I have no idea how to apply destination root across NamedBase generators.
I hope this is helpful.
Related
I'm using ReactJS to build a site, and I want to create a link (a href="relativepath") to a local HTML file so that when the user clicks on the link, it'll open up the html page. The local file is in a different folder X outside of the project, and I don't want to upload it into my src folder because the html file depends on a lot of other files in X. Is there a good way to do so?
I also want to upload a different local HTML file that is already within the src folder of my React App. I currently have something like this:
import htmlFile from "../links/htmlFile.html"; export default function Something(props) { return (<a href={htmlFile}></a>)}
and it says in my terminal that
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <html>| | <head> >
I already tried adding in webpack + an htmlLoader, but I think I followed the steps incorrectly as I wasn't able to get it to work. I uninstalled those packages, so I'm now back to square one.
Thank you so much!
Just linking to or importing from a local file in some other location won't work unless those local files are also deployed to the server in the same location relative to the app (and the web server has access to that location).
So you'll need to copy the file and its linked dependencies in a folder that will be deployed along with your react build, but not where it'll get treated as part of the react codebase so webpack will try to compile it (so not in src either).
If you used create-react-app to set up your application, for example, this would be the public folder; other webpack setups may use different names but the general concept is the same.
I'm using the Gulp to build my SCSS, Pug and ES6 assets for my static website. I know it's possible to hash file names and output the files in a different directory.
For my specific example:
my Pug markdown are found in the ~/src/pages directory and getting built to the ~/public/ directory.
My SCSS stylesheets are found in the ~/src/stylesheets directory. These are getting built to the and getting ~/public/style directory
My problem is, when I'm referring to my stylesheets files from Pug, I have to refer to the already-built folder like this:
link(rel='stylesheet', href='./style/example.css')
For my IDE, this doesn't make sense, because the style directory doesn't exist in the ~/src/pages directory.
What I would find the most useful is that I can refer to my stylesheets like the example below:
link(rel='stylesheet', href='../stylesheets/example.scss')
Is there any way this is possible or am I completely going in the wrong direction? If not, where am I looking for?
Solution to make the file name like hash
gulp, for automating our task
gulp-rev, for renaming our files with random hashes.
gulp-rev-collector, for switching non-hashed references by hashed-references inside our files.
rev-del, for deleting non-hashed files in our /dist folder.
Sample code :
gulpfile.js
gulp.task("revision:rename", ["serve"], () =>
gulp.src(["dist/**/*.html",
"dist/**/*.css",
"dist/**/*.js",
"dist/**/*.{jpg,png,jpeg,gif,svg}"])
.pipe(rev())
.pipe(revdel())
.pipe(gulp.dest("dist"))
.pipe(rev.manifest({ path: "manifest.json" }))
.pipe(gulp.dest("dist"))
);
manifest.json
{
style.css: style-ds9udjvci.css,
main.js: main-dijds9xc9.min.js
}
For creating our revision update in the file like
Rewrite every reference for every key of manifest.json to it’s respective value inside every html/json/css/js file (i.e: <link href="style.css"> would become <link href="style-ds9udjvci.css">)
gulp.task("revision:updateReferences", ["serve", "revision:rename"], () =>
gulp.src(["dist/manifest.json","dist/**/*.{html,json,css,js}"])
.pipe(collect())
.pipe(gulp.dest("dist"))
);
You can use something like gulp-watch for real-time compiling of your .scss files, then your /style/example.css file will exist and it will be recompiled automatically when you modify example.scss
You may need to move some directories around to get everything to link, but you can use watch to build your Pug files too, so your site will always be up to date.
Basically, you make a change on any file in your project and view the update live.
Gulp cannot automatically change the file paths used inside the htmls. Therefore you will have to use the generated file path for accessing the style files.
Although if you want to have the file path as the folder structure of your scss, then you will have to replace the contents of the pug file after gulp has finished converting it to HTML.
You can convert the html to String and use the .replace method to replace whatever content you want to change and finally parse the string to a HTML document.
Hope this helps!!
I've started using a task runner to export all of my folders into a distribution folder using Gulp. The problem arises when I export images into the distribution folder, the path name is different from the one I'm using in my src file. So, as an example, when I target an image in HTML I type:
/assets/images/example.jpg
However, when the HTML file is distributed, it is supposed to target:
/images/example.jpg
It's still pointing to the assets folder, and creates a dead link. Should I be using a module like gulp-replace to automatically change these path names? Or should I just type in the assumed path name? Or, is there another method that I'm missing?
Sorry if I've phrased this badly, I'm working towards a new developer environment - let me know if I can provide you with any other details.
Should I be using a module like gulp-replace to automatically change
these path names?
Yes, gulp-replace will do the trick.
As an alternative you can place your index.html file into assets folder, so you don't need to change any paths when distributing the project.
I am trying to load a file called styles.css which is located in
~/Content/css/styles.css
What I tried is adding it to the _Layout page
<link rel="stylesheet" href="~/Content/css/styles.css" />
This gives a 404 on that location.
I like the way how bower handles external libraries and gulp magically does all the other stuff like minifying a file when I request a minified version, but through all this newness I cannot add a simple static file of my own.
Could someone be so kind to help me reference my own styles.css file?
Joe wrote in his answer:
You can either move/copy the Content folder under www root folder or use grunt file.js to process,combine,minify, and then copy to a folder under wwwroot. But ~/ now means wwwroot.
To elaborate on this:
In Gulp there are four APIs, being:
gulp.task: Define a task
gulp.src: Read files
gulp.dest: Write the files
gulp.watch: Watch the files
To write files from example CSS files from a source to a destination (what I wanted to do), you can define a task as follows:
var gulp = require('gulp')
var paths = {
webroot: './wwwroot/',
cssContent: './Content/css/**/*.css'
};
paths.jsDest = paths.webroot + 'js/';
paths.cssDest = paths.webroot + 'css/';
gulp.task('build:ccs', function () { // Define a task called build.css
console.log('Building Cascading Style Sheets...')
gulp.src(paths.cssContent) // Look for files in the source.
// Do optional other stuff
.pipe(gulp.dest(paths.cssDest)); // Put it in the wwwroot.
});
All this will do is move files from the gulp.src cssContent (my local directory) to the gulp.dest cssDest (the webroot).
To run this before every build specify this go to "View > Other Windows > Task Runner Explorer", right click on the task that appeared called build:ccs and select "Bindings > Before Build".
You can do a lot more with Gulp like minifying, combining, analyzing, adding references to file, but these are the basics.
Note: I learned the above from JavaScript Build Automation With Gulp.js on Pluralsight.
You can either move/copy the Content folder under www root folder or use grunt file.js to process,combine,minify, and then copy to a folder under wwwroot. But ~/ now means wwwroot
When I use yeoman init angular:allto bootstrap my app, yeoman uses the name of the directory I'm calling it from as the name of the main application .js file. I.e. if I'm running the command in /Users/myusername/dev/projects/my-angular-app, then the file app/scripts/my-angular-app.js is created as the main .js file for the app.
If I simply rename the root directory, then using Yeoman to add routes won't work, as it can no longer find the .js file it created. I've tried adding the name of the app as a parameter when invoking the Yeoman init command, but that doesn't work.
I've tried doing the init command in a directory with the name I want the app to have, and then renaming the directory afterwards. But it seems Yeoman reads the name of that directory every time it's invoked, so after changing the name of the directory, Yeoman is no longer able to create routes for me as it can't find the .js file with the same name as the root directory.
How can I make Yeoman use a different name for the my-angular-app.js file?
There's an open ticket about it, please weigh in your thoughts there.
I am not sure if this is possible but you might want to have a look at the Gruntfile.js and replace all the instances in the config were it is storing the old path and replace it with the new path. I am not sure if that will work as I have never tried but it might based on my understanding of Grunt.
I am like you, I like to have things named the way I want which why I don't use Yeoman even though I would love to (like they say, it is opinionated, just too opinionated for me), I have a few custom built grunt tasks that give me most of the functionality I need (mainly auto compile of SASS/TypeScript, minifying CSS/JS, and concating CSS/JS files).
The issue is with generator-angular.
Currently, the app name is taken from the bower component.json file. If you are using the more recent convention of naming this file bower.json, the app name will fall back to the directory name.
Rename bower.json to component.json until support for the new naming scheme makes it into generator-angular.
It looks like these changes have already been made but have yet to be merged into the master branch: renaming-deprecated-component_json