I'm trying to setup a clojurescript project that uses the lein-less plugin to compile .less files. I should say I'm new to clojurescript. The problem is that it doesn't seem to run. It doesn't run when I run "lein figwheel" and neither when I change a .less file.
This is my project.cljs
(defproject fed-repo "0.1.0"
:description "Frontend Repository"
:dependencies [
[org.clojure/clojure "1.7.0"]
[org.clojure/clojurescript "1.7.170"]
[org.omcljs/om "1.0.0-alpha22"]
]
:plugins [
[lein-less "1.7.5"]
[lein-cljsbuild "1.1.2"]
[lein-figwheel "0.5.0-4"]
]
:less {
:source-paths ["src"]
:target-path "resources/public/css"
}
:hooks [
leiningen.less
leiningen.cljsbuild
]
:cljsbuild {
:builds [
{
:id "dev"
:source-paths ["src"]
:figwheel true
:compiler {
:main "fed-repo.core"
:asset-path "js/out"
:output-to "resources/public/js/main.js"
:output-dir "resources/public/js/out"
}
}
]
}
)
What is wrong with this setup?
Under :less the values for the keys :source-paths and :target-path need to go to actual files. You seem to have stopped at the directory.
Here's a working example:
:less {:source-paths ["src/less/"]
:target-path "resources/public/css/"}
Another issue is that you are not telling Figwheel where to hot code reload css from. Example:
:figwheel { :css-dirs ["resources/public/css"] }
With the set up so far there is still no .less -> .css file generation. You could have a terminal open that is dedicated to running lein less once. After changing the .less file run that command. Alternatively automatic generation can be done with the command lein less auto.
Related
I have a website with 2 domains like Page1.com and Page2.com. In my manifest.json file i have set the name to Page 1, but when the website is build and published to Page1.com and to Page2.com i want to change the name to be the same as the domain name. But how can i do this in my build step? Today i se Page 1 when i visit Page2.com.
I have tried to change the meta, application-name in my code to get the correct name, but this don't work.
My vue.config
const manifestJSON = require('./public/manifest.json')
module.exports = {
pluginOptions: {
i18n: {
locale: 'en',
fallbackLocale: 'en',
localeDir: 'locales',
enableInSFC: true
}
},
runtimeCompiler: true,
pwa: {
themeColor: manifestJSON.theme_color,
name: manifestJSON.short_name,
msTileColor: manifestJSON.background_color,
appleMobileWebAppCapable: 'yes',
appleMobileWebAppStatusBarStyle: 'black',
workboxPluginMode: 'InjectManifest',
workboxOptions: {
swSrc: 'service-worker.js',
exclude: [
/_redirects$/
]
}
}
}
This site is build with VueJs and use Netlify as host.
So the manifest file is generated by vue-cli every time you build your app. So you shouldn't be using it to seed the vue-config file.
The one file that you could use the way you have shown here would be your package.json file - but it won't hold the values you are looking for.
Your Vue.config file is where you would enter, manually, the pwa info like theme and background color, etc.
To get back to your initial question, you could create two separate build scripts in your package.json, one for page1 and one for page2, and use environment variables to specify the name you ant to use:
"scripts": {
"page1": "env SITE_NAME='Page 1' npm run prod",
"page2": "env SITE_NAME='Page 2' npm run prod",
...
}
Then in your vue.config file, you can use the variable to build your pwa object:
pwa: {
name: process.env.SITE_NAME,
...
}
Finally, you can build your apps by calling
npm run page1
Be careful though: every build will overwrite your public folder! Depending on your context, how/when you build each app, you may have to take additional steps to generate two separate output folders.
The easiest way is to use process.argv to get a command line argument.
For example if you command to run the file is:
node file.js
Then using:
node file.js env_variable_str
Will have process.argv[process.argv.length - 1] === "env_variable_str"
In my case the manifest had to change not just the value but also add/remove a key depending on the argument. So I made a template (manifest_template.json) and used a "build helper" to create the correct manifest based on my argument in the public/ folder. Then I chained this command with npm run build and had another chaining command which made the zip folder.
My workflow: create manifest.json in public -> npm run build -> make zip with correct name
Let me know if you want to see the code!
When i try to run grunt , i am getting error as "cannot file the config file .jshintrc". I tried to install the config dependencies but nothing is working out.Can anyone tell me how to resolve this particular error. Do i need to define any particular rule in my grunt.js file as I believe this should be generated automatically in the root folder after running grunt.
The piece of lines for jshint task in grunt.js is-
grunt.initConfig({
lesslint:{
src: ['src/']
},
jshint: { // configure the task
all: ['src/app/**/*.js'],
options: {
reporter: require('jshint-html-reporter'),
reporterOutput: 'out/jshint-report.html',
//force report
force: false,
// JS Validation rules are configured in .jshintrc file.
jshintrc: '.jshintrc'
}
});
Any help is much appreciated.
I´m trying to setup a build workflow using the aforementioned technologies, but I´m getting the following error, which seems very generic upon running tests on karma:
TypeError: 'undefined' is not an object (evaluating 'a.Sifter=b()')
This happens even without adding any ECMSA6 specific feature. The same workflow works fine without the transpiling phase in the workflow.
What I tried was to set the babeljs after a concatenation phase and before executing a uglifying on it, like the following snippet:
var defaultTasks = [
"sass:prod", // compile scss sources
"cleanAll", // clean folders: preparing for copy
"copyAll", // copying bower files
"cssmin:customVendor", // minify and concat 'customized from vendor' css
"concat:vendorStyles", // concat vendors's css + minified 'customized from vendor' and distribute as 'css/vendor.css'
"uglify:rawVendors", // minifies unminified vendors
"concat:vendorScripts", // concat vendors's scripts and distribute as 'scripts/vendor.js'
"ngAnnotate:app", // ng-annotates app's scripts
"concat:appScripts", // concat app's (customized from vendor's + ng-annotated + customer's)
"babel",// uses babeljs to convert brandnew ES6 javascript into ES5 allowing for old browsers
"uglify:app" // minify app script and distribute as 'scripts/app.js'
];
if (!skipTest) {
defaultTasks.push("karma:target"); // run tests on minified scripts
}
The imporant definitions are shown:
babel: {
options: {
"presets": ['es2015']
},
dist: {
files: {
"<%= concat.appScripts.dest %>": "<%= concat.appScripts.dest %>"
}
}
},
uglify: {
options: {
mangle: {
except: [
"jQuery", "angular", "tableau", "LZString", "moment", "Moment", "Modernizr",
"app", "modules"
]
}
},
app: {
files: [{
src: ["<%= concat.appScripts.dest %>"],
dest: "<%= app.dist %>/scripts/app.js"
}]
}
},
I´ve tested the transpile a bit, running the default logic from babel url, and it works well, converting basic stuff.
Is there any better workflow that I could use to still run the tests against the same code that would be executed for real?
Thanks
In the end, the workflow was correct.
I just need to modify the filesets a bit in order to avoid transpiling the selectize.js file (which wasn´t really needed).
However, not sure why it was breaking
That solved to me, so I´m closing the question, but perhaps might be useful for someone else.
I develop an iPad/iPhone App web app. Both share some of the resources. Now I wanna build a bootstrap js that looks like this:
requirejs(['app'], function(app) {
app.start();
});
The app resource should be ipadApp.js or iphoneApp.js. So I create the following build file for the optimizer:
{
"appDir": "../develop",
"baseUrl": "./javascripts",
"dir": "../public",
"modules": [
{
"name": "bootstrap",
"out": "bootstrap-ipad.js",
"override": {
"paths": {
"app": "ipadApp"
}
}
},
{
"name": "bootstrap",
"out": "bootstrap-iphone.js",
"override": {
"paths": {
"app": "iphoneApp"
}
}
}
]
}
But this doesn't seems to work. It works with just one module but not with the same module with different outputs.
The only other solution that came in my mind was 4 build files which seems a bit odd. So is there a solution where i only need one build file?
AFAIK the r.js optimizer can only output a module with a given name once - in your case you are attempting to generate the module named bootstrap twice. The author of require.js, #jrburke made the following comment on a related issue here:
...right now you would need to generate a separate build command for each script being targeted, since the name property would always be "almond.js" for each one.
He also suggests:
...if you wanted just one build file to run, you could create a node program and drive the optimizer multiple times in one script file. This example shows using requirejs as a module and calling requirejs.optimize().
I took a similar approach in one of my projects - I made my build.js file an ERB template and created a Thor task that ran through my modules and ran r.js once for each one. But #jrburke's solution using node.js is cleaner.
I'm trying to use msbuild with my sublime project. I created the build file suggested here and the following is my project file
{
"folders":
[
{
"path": "/W/MyOrg/MyApp",
"folder_exclude_patterns": ["_ReSharper.*", "bin", "obj"]
}
]
}
I select the msbuild40 build system and hit Build and get the output:
[Error 6] The handle is invalid
[Finished]
I'm not even sure if this is a python or an msbuild error. Which is it, how can I fix it, and whats a good way to troubleshoot this sort of stuff in the future?
Update
I tried updating my project to the following and using that build and still no dice
{
"folders":
[
{
"path": "/W/MyOrg/MyApp",
"folder_exclude_patterns": ["_ReSharper.*", "bin", "obj"]
}
],
"build_systems":
[
{
"name": "msbuild",
"cmd": ["c:\\Windows\\Microsoft.NET\\Framework\\v4.0.30319\\MSBuild.exe", "w:\\MyOrg\\MyApp\\MyApp.sln"]
}
]
}
Turns out that this happens whenever you start sublime from command line ( I was starting it via a powershell alias).
You can fix this by using a batch file and the START command. I created sublime_text.bat:
START "Sublime Text 2" "C:\Program Files\Sublime Text 2\sublime_text.exe" %*
and set my powershell alias to that bat file. Now everything works.