I want to use gulp + Foundation 6 + browserify.
when run gulp in cli i have this error in terminal
write ./scss.css/foundation.css
path.js:7
throw new TypeError('Path must be a string. Received ' + inspect(path));
^
TypeError: Path must be a string. Received undefined
at assertPath (path.js:7:11)
at Object.join (path.js:1211:7)
at exports.replaceLocation (/Applications/MAMP/htdocs/Jober/node_modules/gulp-ruby-sass/lib/utils.js:32:14)
at /Applications/MAMP/htdocs/Jober/node_modules/gulp-ruby-sass/index.js:179:13
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:416:3)
my gulpfile.js is:
var gulp = require ('gulp'),
logger = require ('gulp-util'),
concat = require ('gulp-concat'),
minifyCSS = require ('gulp-minify-css'),
compileSass = require ('gulp-ruby-sass');
var scss_sources,
input_address,
output_address;
// Input and Output Address
input_address = 'asstes/src/';
output_address = 'asstes/dist/';
// Style Sources
scss_sources = [
'node_modules/foundation-sites/scss',
input_address + 'style/style.scss'];
gulp.task('styles', function(){
return compileSass(scss_sources, { style: 'expanded' })
.pipe(autoprefixer({
browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3'],
cascade: false
}))
.pipe(minifyCSS())
.on('error', logger.log)
.pipe(gulp.dest(output_address + 'style'));
});
gulp.task('watch', function(){
gulp.watch(input_address + 'style/pages/*.scss', ['styles']),
});
gulp.task('default', ['styles' , 'watch']);
my style.scss is:
//Modules
#import 'foundation';
//Pages
#import 'pages/index';
and my folders structure is:
PROJECT FOLDER
|
|_assets
| |_dist
| | |_img
| | |_js
| | |_style
| |
| |_src
| |_img
| |_js
| |_style
|
|_node_modules
| |_foundation-site
|
|_gulpfile.js
I'd used gulp-compass before gulp-ruby-sass but, had popular error: Individual stylesheets must be in the sass directory, therefore change plugin to gulp-ruby-sass.
How can I fix it?
It might be that the string concatenation is not working correctly in the scss_sources.
Try changing scss_sources to:
scss_sources = [
'node_modules/foundation-sites/scss',
'asstes/src/style/style.scss'
];
And see does that work, if so it's the concatenation.
Related
I am building a component library using Vue and TailwindCSS. When I pulled in the dependancy and loaded in the components to my application I noticed non of the styles were present.
I went back to the build and could see that the common, umd and umd.min files were generated but the css file was not.
If I add something like
<style>
.foo {}
</style>
To one of my component vue files and run the build command I can see the /dist/libname.css file is generated with .foo{} inside.
Is there anything I need to do to get the purged css to be included in the build?
I couldn't actually find an answer so I came up with a solution that might be well overcomplicating it.
I have the following scripts in my package.json file;
"build": "npm run build-vue && npm run tailwind && node uibuild",
"build-vue": "vue-cli-service build --target lib --name mypackagename ./src/index.js",
"tailwind": "NODE_ENV=production tailwindcss build -o ./dist/mypackagename-base.css"
And a javascript file;
const fs = require("fs");
const version = require('./package.json').version;
const packageName = 'mypackagename';
fs.readFile("./dist/" + packageName + "-base.css", (err, buff) => {
let contents = "/** \n" +
"* Some Intro Title \n" +
"* Version: v" + version + "\n" +
"* Author: John Doe \n" +
"*/\n\n";
if (err) {
console.error(err);
return;
}
contents += buff.toString() + "\n";
fs.readFile("./dist/" + packageName + ".css", (err, buff) => {
if (! err) contents += buff.toString();
fs.writeFile("./dist/" + packageName + ".prod.css", contents, err => {
if (err) console.error(err);
if (fs.existsSync("./dist/" + packageName + "-base.css")) fs.unlinkSync("./dist/" + packageName + "-base.css");
if (fs.existsSync("./dist/" + packageName + ".css")) fs.unlinkSync("./dist/" + packageName + ".css");
});
});
});
and then simply run npm run build
When I run gatsby build I get this error:
failed Building static HTML for pages - 10.179s
ERROR #95313
Building static HTML failed
See our docs page for more info on this error: https://gatsby.dev/debug-html
343 | for (c = []; b < a; ++b) {
344 | for (var n = 0; n < m; ++n) {
> 345 | c[v++] = Z(d[n] + ' ', h[b], e).trim();
| ^
346 | }
347 | }
348 |
WebpackError: The module '/node_modules/canvas/build/Release/canvas.node'
- stylis.esm.js:345
node_modules/#emotion/stylis/dist/stylis.esm.js:345:1
- stylis.esm.js:151
node_modules/#emotion/stylis/dist/stylis.esm.js:151:1
- stylis.esm.js:175
node_modules/#emotion/stylis/dist/stylis.esm.js:175:1
- stylis.esm.js:286
node_modules/#emotion/stylis/dist/stylis.esm.js:286:1
- stylis.esm.js:151
node_modules/#emotion/stylis/dist/stylis.esm.js:151:1
- stylis.esm.js:175
node_modules/#emotion/stylis/dist/stylis.esm.js:175:1
- stylis.esm.js:286
node_modules/#emotion/stylis/dist/stylis.esm.js:286:1
- stylis.esm.js:151
How to solve? When run gatsby develop there is no error.
Update gatsby-config.js to contain the plugin gatsby-plugin-emotion:
module.exports = {
plugins: [
`gatsby-plugin-emotion`,
],
}
This needs a restart of the gatsby development process.
Add this snippet in the gatsby-node.js:
exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
if (stage === "build-html") {
actions.setWebpackConfig({
module: {
rules: [
{
test: /canvas/,
use: loaders.null(),
},
],
},
})
}
}
There's a package that is trying to access global objects such as window or document in your SSR (Server-Side Rendering) where obviously is not defined (it even exist) because gatsby-build occurs in the Node server while gatsby develop occurs in the browser-side, where the window exists and the compilation time. With the snippet above, you are adding a null loader to the offending module when webpack transpile the code.
The rule test is a regular expression (hence the braces, /) that matches the folder name inside node_modules. The output error shows a canvas issue but you may need to change it to /stylis/
When working with NodeJS, I can pass the arguments to a Node script like this:
$ node node-server.js arg1 arg2=arg2-val arg3
And can get the arguments like so:
// print process.argv
process.argv.forEach(function (val, index, array) {
console.log(index + ': ' + val);
});
//Output
0: node
1: /Users/umar/work/node/node-server.js
2: arg1
3: arg2=arg2-val
4: arg3
How to get the command-line arguments in Deno?
Some experts suggested me to solve the problem by answers to the question
Deno executable path ~ process.argv[0]:
Deno.execPath()
File URL of executed script ~ process.argv[1]:
Deno.mainModule
You can use path.fromFileUrl for conversions of URL to path string:
import { fromFileUrl } from "https://deno.land/std#0.55.0/path/mod.ts";
const modPath = fromFileUrl(import.meta.url)
Command-line arguments ~ process.argv.slice(2):
Deno.args
Example
deno run --allow-read test.ts -foo -bar=baz 42
Sample output (Windows):
Deno.execPath(): <scoop path>\apps\deno\current\deno.exe
import.meta.url: file:///C:/path/to/project/test.ts
as path: C:\path\to\project\test.ts
Deno.args: [ "-foo", "-bar=baz", "42" ]
To get your script’s CLI arguments in Deno, just use Deno.args:
> deno run ./code.ts foo bar
console.log(Deno.args); // ['foo', 'bar']
If you need something identical to Node's process.argv for compatibility reasons, use the official 'node' shim:
import process from 'https://deno.land/std#0.120.0/node/process.ts'
console.log(process.argv); // ['/path/to/deno', '/path/to/code.ts', 'foo', 'bar']
For illustrative purposes, if you wanted to manually construct a process.argv-style array (without using the official 'node' shim) you could do this:
import { fromFileUrl } from "https://deno.land/std#0.120.0/path/mod.ts";
const argv = [
Deno.execPath(),
fromFileUrl(Deno.mainModule),
...Deno.args,
]
console.log(argv); // ['/path/to/deno', '/path/to/code.ts', 'foo', 'bar']
I am trying to run the command npm run build but it is not working. and I am getting the error below:
> typescript#1.0.0 build /Users/Prashant/Code/typescript
> webpack
Hash: c6dbd1eb3357da70ca81
Version: webpack 3.2.0
Time: 477ms
Asset Size Chunks Chunk Names
bundle.js 2.89 kB 0 [emitted] main
[0] ./src/index.js 51 bytes {0} [built]
[1] ./src/index.css 290 bytes {0} [built] [failed] [1 error]
ERROR in ./src/index.css
Module build failed: Unknown word (5:1)
3 | // load the styles
4 | var content = require("!!./index.css");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
| ^
6 | // Prepare cssTransformation
7 | var transform;
8 |
# ./src/index.js 1:0-22
My web pack config file(webpack.config.js) is:
var path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'css-loader',
'style-loader'
]
}
]
}
};
And my CSS file(index.css) is
body {
color:red;
}
and my js file index.js is below:
require("./index.css");
alert('this is my alert');
I am trying to run the file but it is not working I have checked all the spelling also try to add a lot of other CSS but it is not working, can you please help me how can I solve this issue?
The loaders are applied in reverse order. That means you're applying style-loader first and then pass its result to css-loader. The output of style-loader is JavaScript, which will insert the styles into a <style> tag, but css-loader expects CSS and fails to parse JavaScript as it is not valid CSS.
The correct rule is:
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
I was having the same problem and eventually found that there was a second module rule in the webpack config that was processing *.css files
I solved this by just creating style.css file from the same directory of my js file
I was wondering if anyone could help me with this.
I have a project where I am creating multiple html pages for different sites. Each of these sites shares a common assets folder (fonts, css, js etc) my directory layout is as follows:
|-- project
| |--assets
| | |—-css
| | |—-images
| | |—-fonts
| | |—-js
| |--site-1
| | |—-index.html
| |--site-2
| | |—-index.html
| |--site-3
| | |—-index.html
What I would like to achieve is the following:
• A 'dist' folder that contains:
|-- dist
| |--site-1
| | |—-index.html
| | |—-style.min.css
| | |—-image1.jpg
| | |—-image2.jpg
| | |—-image3.jpg etc...
| | |—-scripts.min.js
| | |—-font1.otf
| | |—-font2.otf etc...
| |--site-2
| | |—-index.html
| | |—-style.min.css
| | |—-image1.jpg
| | |—-image2.jpg
| | |—-image3.jpg etc...
| | |—-scripts.min.js
| | |—-font1.otf
| | |—-font2.otf etc...
| |--site-3
| | |—-index.html
| | |—-style.min.css
| | |—-image1.jpg
| | |—-image2.jpg
| | |—-image3.jpg etc...
| | |—-scripts.min.js
| | |—-font1.otf
| | |—-font2.otf etc...
Just to explain the desired result:
• each site is 'flattened' within a directory, so that all of the assets, images, js, css, fonts are on the same level as the index.html file. (a requirement of the 3rd party that needs these)
• The corresponding links in each of the .html, .css & .js are updated the reflect the above.
• At times there might be more or less than just 3 'site' folders - so it would be great if I could 'loop' through and detect a folder name convention (??) - just a nice have if anyone smarter than me knows how to do this with a grunt task.
I have been trying the grunt-rebase task to make this work. It sounds like it is what I need, however I am really struggling with the documentation to make it work, along with a lack of experience with grunt tasks.
Any help would be great. If you need any more info please let me know.
EDIT - here is my grunt.js file - I have removed unneeded tasks and other bumpf for clarity.
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
copy: {
main: {
files: [
{expand: true, cwd: 'project/', src: ['**/*'], dest: 'dist/', filter: 'isFile'}
]
}
},
rebase: {
scoped: {
files: [{
//css ref's
expand: true,
cwd: 'dist/assets/css/',
src: '*.css',
dest: 'dist/site-1/',
reference: '../assets/images/',
scopes: {
url: {
'../images/': '',
'../fonts/': ''
}
}
}, {
//html ref's
expand: true,
cwd: 'dist/site-1/',
src: '**/*.html',
dest: 'dist/site-1/',
reference: true,
scopes: {
url: {
'../assets/images/': ''
},
img: {
'../assets/images/': ''
},
link: {
'../assets/css/': ''
},
script: {
'../assets/js/': ''
}
}
}, {
//images
expand: true,
cwd: 'dist/assets/images/',
src: '**/*',
dest: 'dist/site-1/'
}, {
//fonts
expand: true,
cwd: 'dist/assets/fonts/',
src: '**/*',
dest: 'dist/site-1/'
},
{
//js
expand: true,
cwd: 'dist/assets/js/',
src: '*.js',
dest: 'dist/site-1/'
}]
}
}
});
//1 - make copy of entire prod directory to 'dist folder'
//2 - rebase task
//3 - TODO - delete dist/assets folder (not needed after rebase)
grunt.registerTask('Create Exported Project', [
'copy',
'rebase'
]);
};
The above rebase task works....but only for one folder that i hard code into the 'dest' field for each scope (the 'site-1' folder).
I was hoping for some flexibility to be able to loop through all folders that match a condition (maybe the string - 'site-').