I am trying to create a requirejs optimization config with grunt and almond. Here's the config:
requirejs:
build:
options:
almond: true
dir: 'build'
appDir: ''
baseUrl: '../client'
wrap: true
include: '../client/main'
keepBuildDir: true
paths:
underscore: 'client/vendor/underscore'
jquery : 'client/vendor/jquery'
backbone : 'client/vendor/backbone'
Folder Structure:
Error:
C:\Users\User\Documents\Source\Project>grunt requirejs
Running "requirejs:build" (requirejs) task
>> Error: ENOENT, no such file or directory
>> 'C:\Users\User\Documents\Source\Project\build\models\MenuItem.js'
>> In module tree:
>> ../client/main
Warning: RequireJS failed. Use --force to continue.
Main.js code (written in coffeescript)
requirejs.config(
baseUrl: "client"
shim:
'backbone':
deps: ['jquery']
exports: 'Backbone'
'jquery':
exports: '$'
'underscore':
exports: '_'
paths:
jquery: 'vendor/jquery-1.11.0'
underscore: 'vendor/underscore'
backbone: 'vendor/backbone'
)
define 'start', ()->
window.types =
Models: {}
Collections: {}
Views: {}
null
require ['models/MenuItem', 'views/MenuItem'], (MenuItemModel, MenuItemView)->
view = new MenuItemView(
new MenuItemModel(),
"#app",
'first'
)
view.render();
null
I want to compile my entire project spread across multiple js files into a single file in a way that requirejs would not be needed. I am trying to do this using almond js but the build task does not look for referenced files relative to the path of referring file. Please help me with the correct configuration.
Related
I was wondering if there was a way to use #next/env to replace variables in codegen.yaml when i run yarn codegen:
graphql-codegen -r dotenv/config --config codegen.yml - this is codegen example to load dot env
graphql-codegen -r #next/env --config codegen.yml - this is what i want to achieve
When i call it, i get
${SERVER_API_URL}/graphql goes as undefined/graphql
My usecase is:
# .env
HOST=https
API_DOMAIN=example.com
SERVER_API_URL=$HOST://$API_DOMAIN
# codegen.yaml
schema: ${SERVER_API_URL}/graphql
Why use #next/env? it replaces variables in .env, i'm attaching documentation sample from next.js documentation:
Note: Next.js will automatically expand variables ($VAR) inside of
your .env* files. This allows you to reference other secrets, like so:
# .env
HOSTNAME=localhost
PORT=8080
HOST=http://$HOSTNAME:$PORT
If you are trying to use a variable with a $ in the actual value, it needs to be escaped like so: \$.
For example:
# .env
A=abc
# becomes "preabc"
WRONG=pre$A
# becomes "pre$A"
CORRECT=pre\$A
source: https://nextjs.org/docs/basic-features/environment-variables#loading-environment-variables
You can't use #next/env directly via -r flag. However you still have couple of alternatives. For example, you can address the required .env file directly:
DOTENV_CONFIG_PATH=./.env.local graphql-codegen --config codegen.yml -r dotenv/config
If you still want to use #next/env, you can convert your codegen.yml to codegen.js and import #next/env. For example, my original YML:
overwrite: true
schema:
- https://graphql.fauna.com/graphql:
headers:
Authorization: 'Bearer ${FAUNA_ADMIN_KEY}'
documents: null
generates:
src/generated/graphql.ts:
plugins:
- typescript
- typescript-operations
- typescript-graphql-request
./graphql.schema.json:
plugins:
- 'introspection'
I re-wrote it as JS:
const { loadEnvConfig } = require('#next/env')
loadEnvConfig(process.cwd())
module.exports = {
overwrite: true,
schema: {
'https://graphql.fauna.com/graphql': {
headers: {
Authorization: `Bearer ${process.env.FAUNA_ADMIN_KEY}`,
},
},
},
documents: null,
generates: {
'src/generated/graphql.ts': {
plugins: [
'typescript',
'typescript-operations',
'typescript-graphql-request',
],
},
'./graphql.schema.json': { plugins: ['introspection'] },
},
}
and then generated the code using graphql-codegen --config codegen.js.
Here is an issue on Github that helped me.
I'm using Symfony 5 and copy-webpack-plugin. I would like copy this structure from assets/fonts to public/build/fonts :
assets
----fonts
--------folder1
------------subFolder1.1
----------------file1.1.1
----------------file1.1.2
------------file1.2
------------file1.3
--------folder2
------------subFolder2.1
----------------file2.1.1
----------------file2.1.2
------------file2.2
------------file2.3
--------file3
--------file4
I have this webpack configuration :
const CopyWebpackPlugin = require('copy-webpack-plugin');
.addPlugin(new CopyWebpackPlugin(
[{
patterns: [{
from: '**/*.*',
to: 'fonts',
context: './fonts',
force: true
}]
}],
{
copyUnmodified: true
}
))
However, it doesn't work. I tried a lot of different configurations, to no avail.
1. Summary
I can't set grunt-clean-console plugin, that it works for all my .html files.
2. Details
grunt-clean-console check browser console errors for .html files.
I want to check browser console errors for all .html files of my site. In official descripition I read, how plugin works for specific values of url key. I have many pages in my site; I don't want add each .html file separately. But I can't find, how I can use patterns.
I find, that I can use patterns for built-in Grunt cwd, src, dest keys. But how I can use glob (or another) patterns for custom keys as url of this plugin?
3. Data
Gruntfile.coffee:
module.exports = (grunt) ->
grunt.loadNpmTasks 'grunt-clean-console'
grunt.initConfig
'clean-console':
all:
options:
url: 'output/index.html'
return
example project configuration:
output
│ 404.html
│ index.html
│
├───KiraFirstFolder
│ KiraFirstfile.html
│
└───KiraSecondFolder
KiraSecondFile.html
If I set specific values for url key without patterns as in example above, grunt-clean-console successfully works:
phantomjs: opening page output/index.html
phantomjs: Checking errors after sleeping for 5000ms
ok output/index.html
phantomjs process exited with code 0
Done.
3.1. Steps to reproduce
I run in console:
grunt clean-console --verbose
4. Not helped
4.1. Globbing
Official documentation
Gruntfile.coffee:
module.exports = (grunt) ->
grunt.loadNpmTasks 'grunt-clean-console'
grunt.initConfig
'clean-console':
all:
options:
url: 'output/**/*.html'
return
output:
phantomjs: opening page http://output/**/*.html
phantomjs: Unable to load resource (#1URL:http://output/**/*.html)
phantomjs: phantomjs://code/runner.js:30 in onResourceError
Error code: 3. Description: Host output not found
phantomjs://code/runner.js:31 in onResourceError
phantomjs: loading page http://output/**/*.html status fail
phantomjs://code/runner.js:50
phantomjs process exited with code 1
url output/**/*.html has 1 error(s)
>> one of the urls failed clean-console check
Warning: Task "clean-console:all" failed. Use --force to continue.
Aborted due to warnings.
4.2. Building the object dinamically
Official documentation
Gruntfile.coffee (example):
module.exports = (grunt) ->
grunt.loadNpmTasks 'grunt-clean-console'
grunt.initConfig
'clean-console':
all:
options:
url:
files: [
expand: true
cwd: "output/"
src: ['**/*.html']
dest: "output/"
]
return
output:
File: [no files]
Options: urls=[], timeout=5, url=["output/**/*.html"]
Fatal error: missing url
4.3. Templates
Official documentation
Gruntfile.coffee:
module.exports = (grunt) ->
grunt.loadNpmTasks 'grunt-clean-console'
grunt.initConfig
'clean-console':
all:
options:
url: '<%= kiratemplate %>'
kiratemplate: ['output/**/*.html'],
return
output:
phantomjs: opening page http://output/**/*.html
phantomjs: Unable to load resource (#1URL:http://output/**/*.html)
phantomjs: phantomjs://code/runner.js:30 in onResourceError
Error code: 3. Description: Host output not found
phantomjs://code/runner.js:31 in onResourceError
loading page http://output/**/*.html status fail
phantomjs://code/runner.js:50
phantomjs process exited with code 1
url output/**/*.html has 1 error(s)
>> one of the urls failed clean-console check
Warning: Task "clean-console:all" failed. Use --force to continue.
Aborted due to warnings.
Create a function before the grunt.initConfig part that utilizes grunt.file.expand. For instance:
Gruntfile.js
module.exports = function(grunt) {
grunt.loadNpmTasks 'grunt-clean-console'
// Add this function...
function getFiles() { return grunt.file.expand('output/**/*.html'); }
grunt.initConfig({
'clean-console': {
all: {
options: {
url: getFiles() // <-- invoke the function here.
}
}
}
// ...
});
// ...
}
Notes:
The getFiles function returns an array of file paths for all .html files matching the given glob pattern, i.e. 'output/**/*.html'.
The value of the options.url property is set to getFiles() to invoke the function.
My config
server: {
options: {
sourceMap: true,
sourceMapFilename: '.tmp/styles/main.css.map',
sourceMapURL: '/styles/main.css.map'
},
files: {
'.tmp/styles/main.css':
'src/app/views/styles/application.less'
}
},
My structure
.tmp
src
Gruntfile.js
so after calling grunt less:server
I am getting .tmp/styles/main.css.map
with attr "sources" everywhere src/ prefix
but I want without src/ because server starts from src/*
How can I change it ?
Since version 1.0.0. grunt-contrib-less accepts the same options as the command line compiler does. You can get a list of these options by running lessc wihtout any argument on your command line:
--source-map-rootpath=X Adds this path onto the sourcemap filename and less file paths.
So you should use:
options: {
sourceMap: true,
sourceMapFilename: '.tmp/styles/main.css.map',
sourceMapURL: '/styles/main.css.map',
sourceMapRootpath: "/app/views/styles/"
}
I use grunt-contrib-concat, but it doesn't appear to work.
All file are in the folder.
I used --verbose to see the details, but everything seems to be working correctly.
concat: {
options: {
// define a string to put between each file in the concatenated output
separator: ';'
},
dist: {
// the files to concatenate
src: [
//'assets/javascript/components/*.js',
'assets/javascript/components/jquery-ui-1.10.3.custom.js',
'assets/javascript/components/spectrum.js',
'assets/javascript/components/prefixfree.min.js',
'assets/javascript/src/jquery.menu_css3.js'
],
// the location of the resulting JS file
dest: 'assets/javascript/jquery.<%= pkg.name %>.min.js'
}
},
Running the tasks with --verbose:
Running "concat" task
Running "concat:dist" (concat) task
Verifying property concat.dist exists in config...OK
Files: assets/javascript/src/jquery.menu_css3.js -> assets/javascript/jquery.menu_css3.min.js
Options: separator=";", banner="", footer="", stripBanners=false, process=false
Reading assets/javascript/src/jquery.menu_css3.js...OK
Writing assets/javascript/jquery.menu_css3.min.js...OK
File "assets/javascript/jquery.menu_css3.min.js" created.
Running "uglify" task
Running "uglify:dist" (uglify) task
Verifying property uglify.dist exists in config...OK
Files: assets/javascript/jquery.menu_css3.min.js -> assets/javascript/jquery.menu_css3.min.js
Options: banner="", footer="", compress={"warnings":false}, mangle={}, beautify=false, report=false
Minifying with UglifyJS...Reading assets/javascript/jquery.menu_css3.min.js...OK
OK
Writing assets/javascript/jquery.menu_css3.min.js...OK
File "assets/javascript/jquery.menu_css3.min.js" created.