Haven been playing with this for several hours
package.json
{
"name": "compile-tests",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"grunt": "^0.4.5",
"assemble": "^0.7.3"
}
}
Gruntfile.js
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
assemble: {
options: {
flatten: true,
layout: "../templates/1.hbs"
},
pages: {
files: {
'../dist' : ['../pages/*.hbs']
}
}
}
});
grunt.loadNpmTasks('assemble');
grunt.registerTask('default', ['assemble']);
};
Tried removing and re-installing all the modules a few times. And also tried different versions, interestingly the versions mentioned in this article http://blog.parkji.co.uk/2013/07/06/building-a-static-site-using-grunt-and-assemble.html seem to work but then I get other issues because those versions are out of date.
Error
$ Grunt
>> Local Npm module "assemble" not found. Is it installed?
Warning: Task "assemble" not found. Used --force, continuing.
I just had to use grunt-assemble
$ npm install grunt-assemble --save-dev
And adjust this line in the Gruntfile.js
grunt.loadNpmTasks('grunt-assemble');
Related
PS D:\NextJs\Next-JS-Tutorials\hello-world> yarn dev
yarn run v1.22.19
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info - Using webpack 4. Reason: future.webpack5 option not enabled https://nextjs.org/docs/messages/webpack5
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/parser' is not defined by "exports" in D:\NextJs\Next-JS-Tutorials\hello-world\node_modules\next\node_modules\postcss\package.json
at new NodeError (node:internal/errors:393:5)
at throwExportsNotFound (node:internal/modules/esm/resolve:358:9)
at Module._resolveFilename (node:internal/modules/cjs/loader:981:27)
at mod._resolveFilename (D:\NextJs\Next-JS-Tutorials\hello-world\node_modules\next\dist\build\webpack\require-hook.js:4:1784)
at Module._load (node:internal/modules/cjs/loader:841:27)
at Module.require (node:internal/modules/cjs/loader:1061:19)
at require (node:internal/modules/cjs/helpers:103:18)
at 552 (D:\NextJs\Next-JS-Tutorials\hello-world\node_modules\next\dist\compiled\postcss-scss\scss-syntax.js:1:11590)
at __nccwpck_require__ (D:\NextJs\Next-JS-Tutorials\hello-world\node_modules\next\dist\compiled\postcss-scss\scss-syntax.js:1:11735)
at 270 (D:\NextJs\Next-JS-Tutorials\hello-world\node_modules\next\dist\compiled\postcss-scss\scss-syntax.js:1:400)
at __nccwpck_require__ (D:\NextJs\Next-JS-Tutorials\hello-world\node_modules\next\dist\compiled\postcss-scss\scss-syntax.js:1:11735)
at 327 (D:\NextJs\Next-JS-Tutorials\hello-world\node_modules\next\dist\compiled\postcss-scss\scss-syntax.js:1:260)
at __nccwpck_require__ (D:\NextJs\Next-JS-Tutorials\hello-world\node_modules\next\dist\compiled\postcss-scss\scss-syntax.js:1:11735) {
code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
PS D:\NextJs\Next-JS-Tutorials\hello-world> node -v
v18.12.1
getting this issue why i try to run a next js app (yarn dev)
and the content of "D:\NextJs\Next-JS-Tutorials\hello-world\node_modules\next\node_modules\postcss\package.json" is
{
"name": "postcss",
"version": "8.1.7",
"description": "Tool for transforming styles with JS plugins",
"engines": {
"node": "^10 || ^12 || >=14"
},
"exports": {
".": {
"require": "./lib/postcss.js",
"import": "./lib/postcss.mjs",
"types": "./lib/postcss.d.ts"
},
"./": "./"
},
"main": "./lib/postcss.js",
"types": "./lib/postcss.d.ts",
"keywords": [
"css",
"postcss",
"rework",
"preprocessor",
"parser",
"source map",
"transform",
"manipulation",
"transpiler"
],
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
"author": "Andrey Sitnik <andrey#sitnik.ru>",
"license": "MIT",
"homepage": "https://postcss.org/",
"repository": "postcss/postcss",
"dependencies": {
"colorette": "^1.2.1",
"line-column": "^1.0.2",
"nanoid": "^3.1.16",
"source-map": "^0.6.1"
},
"browser": {
"./lib/terminal-highlight": false,
"colorette": false,
"fs": false
}
}
Please help me to solve this
i tried removing the NODE-MODULES folder and the yarn-lock file and re running 'yarn' command .
but it is not helping
Please can anyone shed some light on how "Targets" work in Parcel, or at least how to separate unminified dev and minified prod files. The sparse documentation just raises further questions and no amount of Googling will find a solution. I am new to Parcel and to the modular nature of newer Javascript syntax.
This all started when I noticed that parcel watch does not minify/uglify the JS, and I don't want that to end up on the prod server. But parcel build WILL minify/uglify the JS. So it would be really swell if my start script could bundle files into build/wp-content/themes/yourproject/assets--dev and the build script could bundle files into build/wp-content/themes/yourproject/assets. That way I can put assets-dev in .gitignore and use those while building the site. Or is that even the proper way to acheive this? In Gulp you can just define different tasks or create one task to do both of these outputs, but I cannot find a way to do this in Parcel.
Description of the project - It's a WordPress site so I can't necessarily feed Parcel source html files to scan. Parcel is really just bundling JS and SCSS files, we are replacing our old Gulp setup. So in package.json, I have this (I'll explain what I have tried in "scripts" and in "targets" further down):
{
"name": "localtesting2",
"version": "1.0.0",
"description": "## Overview",
"browserslist": "> 0.5%, last 2 versions, not dead",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "parcel watch develop/js/index.js develop/styles/style--critical.scss develop/styles/style--noncritical.scss --dist-dir ./build/wp-content/themes/yourproject/assets--dev",
"build": "parcel build develop/js/index.js develop/styles/style--critical.scss develop/styles/style--noncritical.scss --dist-dir ./build/wp-content/themes/yourproject/assets"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"smoothscroll-polyfill": "^0.4.4"
},
"devDependencies": {
"#parcel/transformer-sass": "^2.3.2",
"autoprefixer": "^10.4.2",
"parcel": "latest",
"parcel-bundler": "^1.12.5",
"parcel-resolver-ignore": "^2.0.0",
"postcss": "^8.4.6",
"postcss-modules": "^4.3.0",
"sass": "^1.49.8",
"webfontloader": "^1.6.28"
},
"targets": {
"default": {
"distDir": "build/wp-content/themes/yourproject/assets--dev"
},
"build": {
"distDir": "build/wp-content/themes/yourproject/assets"
}
},
"parcelIgnore": [
"images/*.*",
"webfonts/*.*"
]
}
The root of the project is like this:
build/
-- build/wp-admin
-- build/wp-content
-- etc all the WordPress core/theme files that will ultimately end up on the server
The dev directory looks like this, basically just holding the source code for JS and CSS that get compiled into the theme:
In "scripts" I have tried setting "start" and "build" both with and without the --dist-dir flag. And I remove the "targets" object from package.json when I try --dist-dir.
For "targets", I can't find clear documentation/examples on what exactly goes here so I just tried anything I could think of. I have tried all of the following but nothing works the way I am intending it to. Parcel picks either assets-dev or assets and compiles everything there, it won't separate the code. Sometimes it will just compile files into a dist folder, which I am not using.
"targets": {
"start": {
"distDir": "build/wp-content/themes/yourproject/assets--dev"
},
"build": {
"distDir": "build/wp-content/themes/yourproject/assets"
}
},
"targets": {
"watch": {
"distDir": "build/wp-content/themes/yourproject/assets--dev"
},
"build": {
"distDir": "build/wp-content/themes/yourproject/assets"
}
},
"targets": {
"default": {
"distDir": "build/wp-content/themes/yourproject/assets--dev"
},
"build": {
"distDir": "build/wp-content/themes/yourproject/assets"
}
},
"targets": {
"dev": {
"distDir": "build/wp-content/themes/yourproject/assets--dev"
},
"prod": {
"distDir": "build/wp-content/themes/yourproject/assets"
}
},
Ultimately I am looking for how to get unminified assets into one folder that I can conditionally load, and minified assets into another folder that will get loaded on the prod server.
I figured it out. The CLI commands in the "scripts" portion of package.json can include the --target flag. This way you can name a target and then define it in the "targets" property. This is the working package.json:
{
"name": "localtesting2",
"version": "1.0.0",
"description": "## Overview",
"browserslist": "> 0.5%, last 2 versions, not dead",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "parcel watch develop/js/index.js develop/styles/style--critical.scss develop/styles/style--noncritical.scss develop/styles/editor.scss --target default",
"build": "parcel build develop/js/index.js develop/styles/style--critical.scss develop/styles/style--noncritical.scss develop/styles/editor.scss --target build"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"smoothscroll-polyfill": "^0.4.4"
},
"devDependencies": {
"#parcel/transformer-sass": "^2.3.2",
"autoprefixer": "^10.4.2",
"parcel": "latest",
"parcel-bundler": "^1.12.5",
"parcel-resolver-ignore": "^2.0.0",
"postcss": "^8.4.6",
"postcss-modules": "^4.3.0",
"sass": "^1.49.8",
"webfontloader": "^1.6.28"
},
"targets": {
"default": {
"distDir": "build/wp-content/themes/yourproject/assets--dev"
},
"build": {
"distDir": "build/wp-content/themes/yourproject/assets"
}
},
"parcelIgnore": [
"images/*.*",
"webfonts/*.*"
]
}
Still though there must be a better workflow for this, or maybe a way to get the watch command to minify everything like build does.
I'm using Vue 3 and trying to add tailwindcss into it from the following tutorial. https://tailwindcss.com/docs/guides/vue-3-vite#install-tailwind-via-npm
I have installed the dependencies using the following command,
npm install -D tailwindcss#npm:#tailwindcss/postcss7-compat postcss#^7 autoprefixer#^9
But when I tried to create the configuration files using the following command
npx tailwindcss init -p
It is giving me the following error.
npx: installed 83 in 5.2s Cannot find module 'autoprefixer' Require
stack:
/~/.npm/_npx/33283/lib/node_modules/tailwindcss/lib/cli/commands/build.js
/~/.npm/_npx/33283/lib/node_modules/tailwindcss/lib/cli/commands/index.js
/~/.npm/_npx/33283/lib/node_modules/tailwindcss/lib/cli/main.js
/~/.npm/_npx/33283/lib/node_modules/tailwindcss/lib/cli.js
I don't know why autoprefixer is not detecting because I have already installed it.
Even the package.json have it.
{
"name": "wooclime",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"autoprefixer": "^9.8.6",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0",
"postcss": "^7.0.35",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.0.2"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
Run:
npx tailwindcss-cli#latest init -p
Please uninstall run this command:
npm uninstall tailwindcss postcss autoprefixer
After this module is uninstall, please run this command:
npm install tailwindcss#latest postcss#latest autoprefixer#latest
I had the same problem when I ran the command with node version 14.15.0.
Apparently using node 15.5 solved it for me. I think there's a problem with npm or something.
You could use the following command using the tailwindcss cli with latest version an the flag --postcss or -p
npx tailwindcss-cli#latest init --postcss
Or follow these steps :
After installing that dependencies try to create the following files project root without running that command :
tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
Then in your main CSS file add :
#tailwind base;
#tailwind components;
#tailwind utilities;
I had same issue
I downgrade the tailwindcss package to 1.0.5 from latest
Now it is working
Following exactly the getting started guide on the webpack site I run into this error on build:
ERROR in ./src/index.js Module not found: Error: Can't resolve 'css-loader' in 'C:\Users\Dominik\Desktop\tutorial' # ./src/index.js
2:0-21 webpack.config.js
The css-loader is installed locally. It is registered in the package.json. What Im I doing wrong?
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist")
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
}
};
package.json
{
"name": "tutorial",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^3.4.0",
"style-loader": "^1.1.1",
"webpack": "^4.41.4",
"webpack-cli": "^3.3.10"
},
"dependencies": {
"lodash": "^4.17.15"
}
}
index.js
import _ from "lodash";
import "./style.css";
function component() {
const element = document.createElement("div");
element.innerHTML = _.join(["Hello", "webpack"], " ");
element.classList.add("hello");
return element;
}
document.body.appendChild(component());
style.css
.hello {
color: red;
}
Try re-running npm install --save-dev css-loader. Can you see it in your node_modules folder?
EDIT
Uninstalling and re-installing the module fixed it:
npm remove css-loader && npm install --save-dev css-loader
Hi I am trying to learn grunt tutorial from youtube and I am following the same instruction as mention in the video.
But while running the command grunt in my system I am getting the error , which I am not able to resolve it.
Below is my package.json
{
"name": "shreyansh",
"version": "1.0.0",
"description": "running grunt test",
"main": "index.html",
"author": "shreyansh",
"devDependencies": {
"grunt": "^1.0.1",
"grunt-contrib-cssmin": "^1.0.2",
"grunt-contrib-uglify": "^2.0.0"
}
}
Gruntfile.js
module.exports = funtion(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
cssmin: {
combine:{
files:{
'Project/css/main.css': [ 'file-upload.css']
}
}
}
});
grunt.LoadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default', ['cssmin'])
};
Error : -
Loading "Gruntfile.js" tasks...ERROR >> SyntaxError: Unexpected token {
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.
I tried to look for the similar errors questions from stackoverflow but no luck.
Any help is appreciated as I am using grunt first time
Thanks
Fix the typo in line 1 of your gruntfile, change funtion to function:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
cssmin: {
combine:{
files:{
'Project/css/main.css': [ 'file-upload.css']
}
}
}
});
grunt.LoadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default', ['cssmin'])
};