Does anyone know how to change the "dist" folder for Zurb 6 to be the top level of the site, i.e. so the output would be the same level as "src"?
In config.yml I have tried changing "dist" to "" but am not sure what else to try.
Thanks in advance
Reference Zurb Foundation 6:
File: config.yml
PATHS:
dist: "dist" // change this to new folder ROOT "./"
IMPORTANT:
File: gulpfile.babel.js
// Delete the "dist" folder
// This happens every time a build starts
function clean(done) {
rimraf(PATHS.dist, done);
}
So if you change to the PATHS.dist to ./ it will actually delete the whole project.
You DO NOT NEED to access ./src FROM dist/ as the ./src gets compiled to ./dist/assets.
Hope it helps
I'm not sure if i understand your question correctly. But you can use the standard unix format to go up one level.
So change in your config.yml file:
dist: "dist"
to
dist: "../dist"
Related
Index.html & app.css is outside of the /tailwindcss/...
Vite Server is running but not working on localhost.
How to fix this problem
I don't want to put index.html in directory tailwindcss.
You could try specifying the entry point used by Rollup explicitly:
// vite.config.ts
export default {
build: {
rollupOptions: {
input: {
// entry point for compilation; normally would be "./index.html"
app: '../index.html',
but honestly it feels like you're fighting against the tools, and you should have that package.json one directory up in your project.
Vite looks for a root index.html by default. You can change this behaviour in package.json.
To do this, simply modify the following to suit...
"scripts": {
"dev": "vite serve ./src"
},
In this example, I've put my entry index.html file inside a src folder. I tell Vite about this via serve, following that with the relevant directory (file path is relative to project root).
Read more here.
I have two questions.
Question #1
I'm writing npm package on ES6 and have following package.json:
{
"name": "mypackage",
"bin": {
"mybin": "dist/bin/mybin.js"
},
"dependencies": [...],
"devDependencies": [...],
"directories": {
"lib": "dist"
},
"main": "dist/index.js",
"scripts": {
"compile": "./node_modules/.bin/babel ./src --optional runtime --presets es2015,stage-0 -d ./dist",
"prepublish": "npm run compile"
}
}
Everything is compiled successfully every time.
However, I can include:
var mypackage = require('mypackage');
But I'm not able to include subfolder with the same starting path:
var constants = require('mypackage/core/constants');
Of course constants.js has following full path mypackage/dist/core/constants.js
But I would like to include it without dist part..
For now to include constants I should write like this:
var constants = require('mypackage/dist/core/constants');
Which doesn't make a lot of sense.
I don't like approach when I should use NODE_PATH to solve this issue.
I need solution without making users extra-efforts to include dist folder contents.
At least users should not rely to compilation/publishing folders structure, they should not even know anything about this.
Question #2
How can I compile all the .es6 files to dist and then copy all the other files except compiled from src to dist?
For example, I have different templates, assets, etc.
I would like structure of dist to be exactly the same including all the files as in src but .es6 compiled to .js.
I know obvious solution to copy entire src to dist and then compile everything from dist to dist, but it doesn't look like a smart way for me.
On the other hand, I wouldn't like to specify every single asset/image/template to copy to dist folder.
May be there's gulp plugin to make exact copy from folder to folder but excluding all the files with given extension (or regexp)?
Update #1
#molda
I have also structure inside:
-- src/modules
---- module1
-------- static
---- module2
-------- static
So keeping all the static files in src/static isn't solution
I am trying to create a self-executing bundle of an application, but jspm can't find what it's looking for.
I have the following folder structure
The src directory contains all of the JavaScript, but it is hosted by node as if it were the root. jspm_packages is hosted as if it were inside the root, making normal module import without a path possible (ie import React from 'react')
The app runs just fine, but when I try to build it fails because it doesn't know to look in the src directory and the jspm_packages directory for modules. Is there a way to fix this without changing the folder structure or the root-hosting?
I am ok with moving the system.config.js file into src if that makes this possible)
EDIT
This is easy if you move jspm_packages into src.
in package.json
"jspm": {
"directories": {
"baseURL": "src"
},
"configFile": "src/system.config.js"
}
This will put both system.config.js and jspm_packages in src (don't use a baseUrl in system.config.js), and bundling will work. The major drawback here is the src folder no longer contains only the project code; it now also contains library code. Performing folder searches becomes harder, and I just prefer the idea of a folder with all of my code in it.
EDIT2
After thinking about this problem more, I guess what I am really after is a method to specify an alternate path configuration during bundling. Based on my reading of the docs, this appears to be unsupported.
You can set your baseUrl to be the root (i.e. "/") and then set the path for your source code on the paths property like this:
System.config({
baseURL: "/",
paths: {
"*": "dist/*",
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
}
})
Full working example can be seen here.
Furthermore, if you need to change you paths just for bundling you could use the jspm-cli in a gulp task and override your builder configuration like this:
var jspm = require('jspm');
gulp.task('task', function () {
var builder = new jspm.Builder();
builder.loadConfigSync('pathToYourConfigFile');
builder.config({
paths: {
'*': 'pathToYourCode'
}
});
builder.bundle('yourOptionsHere');
}
I'm Trying to set up my front-end build system with brunch but have an annoying issue that whatever I do brunch ignores bower_components folder and doesn't process anything in it.
this is my brunch-config.coffee file
module.exports = config:
files:
javascripts:
joinTo:
'js/app.js': /^app/
'js/vendor.js': /^bower_components/
order:
before: [
'bower_components/angular/angular.js'
]
stylesheets:
joinTo:
'css/app.css'
paths:
'public': 'build'
modules:
definition: false
wrapper: false
plugins:
assetsmanager:
copyTo: '':['app/pages',
'app/background.js',
'app/manifest.json']
So js/app.js file always gets sucessfully compiled but vendor.js file is not there. Any Idea?
After I wrote my comment on the original question I figured it out and it was because I had my bower.json-file inside the bower_components-folder but it has to be in the same directory as the brunch-config.js|coffee-file is in.
So the directory-structure should look like this:
directory
- bower_components/
- app/
- bower.json
- brunch-config.js
Try to remove your dependencies on the bower.json from top to bottom. When you catch this dependency try to use read-components. That's worked for me.
I am looking for GRUNT automation task which watches the less files in the root directory and gives us the css files of the same name as the less files in the same directory like
Root Folder
package.json
Gruntfile.js
Folder1
file1.less
file2.less
Folder2
file3.less
file4.less
My Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
//our LESS options
less: {
development: {
files: {
"": "" //not able to write this line, how can i mention which file to compile as i am watching the entire folder
}
}
},
watch: {
css: {
files: '**/*.less',
tasks: ['less']
}
}
});
//load our tasks
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
//default tasks to run
grunt.registerTask('default', ['less']);
}
Not able to mention the source less file name and result css file name in less task config, as i am watching the entire folder, i want to create the css file for the corresponding less file in the same path as less, whenever particular css is changed. Want to compile the less file which is changed , not all the less files to be compiled, if one less is changed.
Thanks in advance for any help.
You can use grunt-newer to configure you less task to run with newer files only.
npm install grunt-newer --save-dev
once the plugin is installed, add
grunt.loadNpmTasks('grunt-newer');
edit the watch task:
watch: {
css: {
files: '**/*.less',
tasks: ['newer:less']
}
}
Have a look at the grunt.js docu and see how to build files object dynamically.