Build Semantic UI in Shared Folder with Gulp
I am setting up semantic frontend with Node.js using the guide at https://semantic-ui.com/introduction/getting-started.html .
So I first install Gulp ( npm install -g gulp
), then semantic UI ( npm install semantic-ui --save
) and finally build with
cd semantic/
gulp build
Now I am getting a folder /semantic/
in my project root.
The problem is I am using Express.js, so I have all my views in /views/
and my static files in /public/
.
When I build with Gulp, I am getting js and css files in /semantic/dist/
, so I cannot access them on the client.
What can I do is use
app.use(express.static(path.join(__dirname, 'semantic')));
and then refer to css and js files with
<link href="/dist/semantic.css">
and
<script src="/dist/semantic.js">
but I would prefer that these two files be located in /public/css/
and /public/js/
respectively.
Right now I just want to move two files from /semantic/dist/
two folders to /public/
, but in https://semantic-ui.com/introduction/getting-started.html , it is recommended to use
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="semantic/dist/semantic.min.js"></script>
but since /semantic/
it is not added as a static folder in Express.js, I cannot access this folder from the client.
My file semantic.json
looks like
{
"base": "semantic/",
"paths": {
"source": {
"config": "src/theme.config",
"definitions": "src/definitions/",
"site": "src/site/",
"themes": "src/themes/"
},
"output": {
"packaged": "dist/",
"uncompressed": "dist/components/",
"compressed": "dist/components/",
"themes": "dist/themes/"
},
"clean": "dist/"
},
"permission": false,
"autoInstall": true,
"rtl": false,
"version": "2.2.9"
}
Is it safe to say that js files should go to /public/js/
and css files in /public/css/
in this config file?
source to share
No one has answered this question yet
Check out similar questions: