I have a Gulp site with BrowserSync and the following structure:
.
├── README.md
├── gulpfile.js
...
├── app/
│ ├── index.html
│ ├── example.html
│ ├── tools.html
│ └── tools/
└── dist/
When I try to access the tools page via http://localhost:3000/tools, a 301 redirection is returned, redirecting me to http://localhost:3000/tools/.
The http://localhost:3000/example page works perfectly, this issue only happens when a folder with the same name is present.
Here is the content of my Gulpfile:
// Starts browserSync
gulp.task('serve', function(done){
browserSync({
server: {
baseDir: './dist',
index: "index.html",
serveStaticOptions: {
extensions: ['html']
}
}
});
done();
});
Note that http://localhost:3000/tools.html works, but I do not want to use the extension. How can I access the /tools page without being redirected?
Related
I am a beginner in Hugo. I generated a static site, added a theme, added some content. It works in my local. All the links behave as they are supposed to. Then I do "Hugo" to generate deployable files in public directoery. Now I placed this public folder in my server. The home page loads properly, but contents are redirecting to net domain site.
(copy site url and check in you your browser) => https://smehetre.xyz/
Config file below:
baseURL: https://smehtre.xyz/
languageCode: en-us
title: hello friend
theme: "PaperMod"
menu:
main:
- identifier: Search
name: Search
url: /search/
weight: 10
- identifier: Archives
name: Archives
url: /archives/
weight: 20
- identifier: Resume
name: Resume
url: /resume/
weight: 30
- identifier: About
name: About
url: /about/
weight: 40
Public folder deployed on my nginx server:
├── 404.html
├── about
│ └── index.html
├── archives
│ └── index.html
├── assets
│ ├── css
│ │ └── stylesheet.min.8e489ec970cd58539487a8f697c827fd0de4aa9f638217b7db51cbc230ff6f95.css
│ └── js
│ ├── highlight.min.2840b7fccd34145847db71a290569594bdbdb00047097f75d6495d162f5d7dff.js
│ └── search.min.994d971a9492abf73721874ff533ba36f8b86300a65b0f03c96111ab1f6f32b2.js
├── categories
│ ├── index.html
│ └── index.xml
├── index.html
├── index.json
├── index.xml
├── page
│ └── 1
│ └── index.html
├── posts
│ ├── index.html
│ ├── index.xml
│ ├── my-first-post
│ │ └── index.html
│ └── page
│ └── 1
│ └── index.html
├── search
│ └── index.html
├── sitemap.xml
└── tags
├── index.html
└── index.xml
Try to click on my first post, or Search or Archives or About page.
It redirects to https://net.domain.name/
Please HELP!!!
This looks like a DNS issue, not a Hugo issue.
According to the WhatsMyDNS Tool your Name Server isn't set at all anywhere (link).
According to ICANN, you've never actually registered your domain. Godaddy shows the same.
You need to actually purchase a domain before you can use it.
If you have purchased your domain, contact your registrar to figure out the issue.
If you haven't purchased it yet, make sure you do that.
I am setting up a new web application in netbeans. It has the following directory structure.
project
├── gulpfile.js
├── package.json
├── Sources
│ └── public
│ └── js
| └──main.js
└── Site Root
└── js
In my gulpfile.js I have
// Concatenate & Minify JS
gulp.task('scripts', function() {
return gulp.src('public/js/*.js')
.pipe(concat('main.js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('../Site Root/js'));
});
This runs but creates Site Root in the Sources folder so
project
├── gulpfile.js
├── package.json
├── Sources
│ └── Site Root
| └──js
| | └──main.min.js
│ └── public
│ └── js
| └──main.js
└── Site Root
└── js
How do I configure the task so that it puts the output into the Site Root folder.
It's because of gulp.src is set to public/js.
when you are running task you gulp.dest is taking public/js as your current path.
try this :
.pipe(gulp.dest('../../Site Root/js'));
I have a project with multiple folders that contain sass files:
|── src
└── scripts
└── app1
└── sass
└── base.scss
└── app2
└── sass
└── base.scss
I also have a gulp task that compiles those .scss files using gulp-sass and gulp-concat-css:
gulp.task('build:sass', () =>
gulp.src([
'scripts/**/*.scss'
])
.pipe(plugins.sass().on('error', plugins.sass.logError))
.pipe(plugins.concatCss('bundle.css'))
.pipe(gulp.dest('dist'))
);
Right now, the above task just creates bundle.css into the dist folder:
|── dist
└── bundle.css
What I'd like to have happen is this, where the initial folder structure is preserved, except for the sass folder is now css.
|── dist
└── scripts
└── app1
└── css
└── bundle.css
└── app2
└── css
└── bundle.css
You can use the gulp-flatmap plugin to solve this:
var path = require('path');
gulp.task('build:sass', () =>
gulp.src('scripts/app*/')
.pipe(plugins.flatmap((stream, dir) =>
gulp.src(dir.path + '/**/*.scss')
.pipe(plugins.sass().on('error', sass.logError))
.pipe(plugins.concatCss('css/bundle.css'))
.pipe(gulp.dest('dist/' + path.basename(dir.path)))
))
);
This selects all of your app directories and then maps each of those directories to a new stream in which all .scss files in that particular directory are concatenated into a single bundle.css file.
I'm starting to build a front-end in Aurelia that is integrated into a Clojure project. I checked out some example projects and while I did find them useful for an overview, I've noticed that a lot of the out-of-the-box configurations assume the project is at root (which is understandable).
When I try to integrate this into my project and change the paths accordingly, the bundle is looking for resources in the wrong place - with a path that matches their location in the project, but not within the server's public directory.
For example, I have configured the application to bundle files that are in ./resources/public/, which is where the built files are located (I'm using several pre-processors), and these files are bundled correctly; however, when I load the page, I get the following error in my JS console:
system.src.js:4597 GET https://localhost:8443/resources/public/dist/aurelia.js 404 (Not Found)
The correct path is localhost:8443/dist/aurelia.js - I have a feeling that the /resources/public is coming from some configuration files, but if I change those the bundling breaks.
Relevant paths in the project are (truncated for brevity):
MyProject
├── gulp
│ ├── bundles.js
│ ├── paths.js
│ └── tasks
│ ├── build.js
│ ├── bundle.js
├── gulpfile.js
├── package.json
├── resources
│ ├── public
│ │ ├── config.js
│ │ ├── css
│ │ ├── dist
│ │ │ ├── app-build.js
│ │ │ └── aurelia.js
│ │ ├── fonts
│ │ ├── html
│ │ ├── img
│ │ ├── index.html
│ │ ├── js
│ │ │ ├── app.js
│ │ └── jspm_packages
│ │ ├── system.js
│ │ ├── github
│ │ └── npm
│ └── src
│ ├── fonts
│ ├── img
│ ├── js
│ ├── pug
│ └── stylus
Here are some of the pertinent configurations, trimmed for brevity:
./config.js
baseURL: "/",
...
paths: {
"*": "resources/public/*",
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
}
Note that if I change the path for "*" (or remove it entirely), I get the following error when running gulp build:
Error on dependency parsing for npm:jquery#2.2.4/src/intro.js at
file:///Users/jszpila/Work/MyProject/resources/public/jspm_packages/npm/jquery#2.2.4/src/intro.js
MultipleErrors:
compiler-parse-input:47:1: Unexpected token End of File
compiler-parse-input:47:1: Unexpected token End of File
compiler-parse-input:47:1: Unexpected token End of File
./package.json
"jspm": {
"directories": {
"baseURL": "resources/public"
},
"devDependencies": {
"aurelia-animator-css": "npm:aurelia-animator-css#^1.0.0-beta.1.1.2",
"aurelia-bootstrapper": "npm:aurelia-bootstrapper#^1.0.0-beta.1.1.4",
"aurelia-fetch-client": "npm:aurelia-fetch-client#^1.0.0-beta.1.1.1",
...
}
},
./gulp/bundles.js
"bundles": {
"dist/app-build": {
"includes": [
"[**/*.js]",
"**/*.html!text",
"**/*.css!text"
],
"options": {
"inject": true,
"minify": true,
"depCache": true,
"rev": false
}
},
"dist/aurelia": {
"includes": [
...
"fetch",
"jquery"
],
"options": {
"inject": true,
"minify": true,
"depCache": false,
"rev": false
}
}
}
./gulp/tasks/bundle.js
var config = {
force: true,
baseURL: './resources/public/',
configPath: './resources/public/config.js',
bundles: bundles.bundles
};
So I think it's safe to assume that this incorrect path is coming from one of those configurations; however, they are correct for the tooling - just not the bundle. Can I configure the bundling tool paths and the application tool paths separately, or am I overlooking a misconfiguration?
Thanks in advance for any help!
I would like to have a gulp task with main-bower-files that filters, and uses options, like debugging or includeDev. I have a bower_components directory and I can get the task to work with either the filter or the options, but not both. I know that I can include the options in the bower.json file, but I'm curious if and how to do both in the task?
I'm looking at the documentation for main-bower-files and I guess I don't understand the documentation where it says: var files = mainBowerFiles( [[filter, ] options] [, callback] );
Here's the excerpt from my gulpfile.js
gulp.task('jsbower', function() {
return gulp.src(bowerFiles('**/*.js'))
.pipe(gulp.dest('build/scripts/vendor'));
});
I see that I can also use: bowerFiles({filter: '**/*.js'})). I can move everything (css from bower components also goes), no filters, and show the debugging with:
gulp.task('jsbower', function() {
return gulp.src(bowerFiles({debugging:true}))
.pipe(gulp.dest('build/scripts/vendor'));
});
How do I combine the options and filter?
Here's what I ended up working out to get the JavaScript packages from bower_components into a source/scripts/vendor directory
gulp.task('jsbower', function() {
return gulp.src(mainBowerFiles('**/*.js',
{ debugging: true, includeDev: true }),
{ base: 'bower_components' })
.pipe(gulp.dest('source/scripts/vendor'));
});
(Thinking... I probably do not need to be using devDependencies, dependencies seems like the right classification for the jQuery and GSAP, where consolelog is more like a devDependcency?)
Learned from the main-bower-file doc that addding the base: 'bower_components includes the folder stucture, but without all the package's stuff. Which gets this in the source/scripts:
// from source/scripts/
.
└── vendor
├── consolelog
│ └── consolelog.js
├── gsap
│ └── src
│ └── minified
│ ├── TimelineMax.min.js
│ ├── TweenMax.min.js
│ ├── easing
│ │ └── EasePack.min.js
│ └── plugins
│ └── CSSPlugin.min.js
└── jquery
└── dist
└── jquery.js
The key seems like the first string or array is the filter, then the rest will be options, the main-bower-files doc says that. I think this my simplified translation: gulp.src(mainBowerFiles(string or array,{key:value, key:value}))
Leaving out the base using
return gulp.src(mainBowerFiles('**/*.js', { debugging: true, includeDev: true })) will get me:
.
└── vendor
├── CSSPlugin.min.js
├── EasePack.min.js
├── TimelineMax.min.js
├── TweenMax.min.js
├── consolelog.js
└── jquery.js