I use underscores.me as a starter template for any new theme I create. Previously I just used dart-sass to compile my scss files into css. However, I'm starting a new project and would like to use the package.json file included with underscores (Sassified and with Woo Commerce), but I'm a bit confused about the included CLI commands that are in the package.json.
The following scripts are taken from the generated package.json file:
"scripts": {
"watch": "node-sass sass/ -o ./ --source-map true --output-style expanded --indent-type tab --indent-width 1 -w",
"compile:css": "node-sass sass/ -o ./ && stylelint '*.css' --fix || true && stylelint '*.css' --fix",
"compile:rtl": "rtlcss style.css style-rtl.css",
"lint:scss": "wp-scripts lint-style 'sass/**/*.scss'",
"lint:js": "wp-scripts lint-js 'js/*.js'",
"bundle": "dir-archiver --src . --dest ../_s.zip --exclude .DS_Store .stylelintrc.json .eslintrc .git .gitattributes .github .gitignore README.md composer.json composer.lock node_modules vendor package-lock.json package.json .travis.yml phpcs.xml.dist sass style.css.map yarn.lock"
}
Here are my questions:
What is the main difference between "watch" and "compile:css"? If one watches Sass files for changes and then compiles to CSS, how is this any different from compile:css? Should they both be running?
Are these all scripts that should be running simultaneously during dev/coding? Or, are some supposed to be run only at specific times, such as "bundle" when I need to recompile certain files like JavaScript to compile a production version?
If these are not meant to all be running simultaneously, such as the "bundle" command, when is the ideal time to run this script and once it's run should I stop it or simply let it keep running in the background?
Would I only use "compile:rtl" if using languages written from right-to-left?
Since the linting commands check for errors in SCSS and JS, should those be run simultaneously during development as well, or only when you go to check work prior to deploying to production?
So assuming I do not need to compile:rtl, how would one use the remaining 5 scripts most effectively and efficiently?
Related
I have several dashboards in project and I decided to make separate scripts in package.json for each(in development it's not very useful to build all dashboards when you work only with one. It takes more time).
First I found that via script is possible to launch concrete webpack config.So it will look like:
"scripts": {
"dash1": "export NODE_ENV=development && webpack --config=webpack.dash1.config.js -d --watch --display-error-details export name=employee ",
"dash2": "export NODE_ENV=production && webpack --config=webpack.dash2.config.js --progress",
"dash3": "export NODE_ENV=development && webpack --config=webpack.dash3.config.js -d --watch --display-error-details",
}
In this case I will need to have 3 separate webpack config-files, where I'll specify proper entry files. But Is it possible somehow to pass the parameter in npm script and to check it in webpack config? Maybe it's possible to perform conditional check for entries according to trnasmitted from npm-script param?
Webpack config files are just javascript - so anything goes. In your case you could
use environment variables
https://webpack.js.org/guides/environment-variables/
NODE_ENV=development DASHBOARD=dash1 webpack --config=webpack.config.js
(p.s. you do not need export blah &&)
use a base config and a configuration for each dashboard which extends this configuration
config
├── base.config.js
├── dash1.config.js // extends base.config.js
└── dash2.config.js
and use a tool like https://github.com/survivejs/webpack-merge to help with merging the base configuration.
I was wondering if anyone could help, I'm attempting to finish off my build process which currently transpiles es6 > es5 using babel, After that has completed I want to use uglifyJS to recursively minify all my .js files using just NPM scripts (no grunt or gulp please).
What I desire;
Convert all .js in folder to es5
Minify all .js files in a given folder using uglify
Create source maps
Copy out to a new folder
My current setup;
Converts all .js to es5
Minify all es5 .js files (However no sourcemaps are created, also the es5 js files are replaced as theres no support to move to another folder)
I've tried: https://www.npmjs.com/package/recursive-uglifyjs and https://www.npmjs.com/package/uglifyjs-folder but these both seem unable to perform the build steps I need
Here is my package.json scripts section
"babel": "babel js_uncompiled --out-dir js_uncompiled/es5 --source-maps && npm run npm:uglify",
"build": "npm run babel",
"uglify": "recursive-uglifyjs js_uncompiled/es5"
You can find a link to my full package.json here : http://pastebin.com/4UHZ1SGM
Thanks
EDITED: included info from comments
So, now uglifyjs-folder has the option of passing a config file so you can run all uglify's commands, but on a whole folder (and you can transpile to ES5 using harmony - as stated in comments).
Note this is better than doing so manually with cat or other shell commands, since uglifyjs-folder can generate a single output file (concatenated) and is simpler to use.
Run uglifyjs-folder "%CD%" --config-file "uglify.config.json" --output "folder" -e where the config file (in the root folder of project) contains for example (not all options needed):
{
"compress": true,
"mangle": true,
"sourceMap": {
"base": "input/path/",
"content": "input/sourcemap",
"filename": "{file}.min.js",
"includeSources": true,
"root": "original/source/path",
"url": "source/path"
}
}
Obs.: currently there is one open issue by myself because source-mapping is resulting in error. Once the issue is solved I will update my answer here.
UPDATE: ok, issue solved, version 1.5 released! Code above updated
The Context
I have one main project which has multiple node projects inside that as subdirectories. each one with their own node_modules directories and package.json files. I want to have an npm script defined in my main package.json files which runs npm scripts from each of those projects concurrently.
The Code
My directory structure is like this:
main:
...
package.json
- sub-project-1
- ...
package.json
- sub-project-2
...
package.json
Sub-project-1/package.json:
...
"scripts": {
"start": "node run foo.js"
}
Sub-project-2/package.json:
...
"scripts": {
"start": "node run bar.js"
}
Main package.json:
...
"scripts": {
"start": "/* Here I want to do something like npm sub-project-1/ start && npm sub-project-2/ start */
}
Now, obviously I could copy and paste the commands in sub-project-1/package.json's start script and sub-project-2/package.json's start script into a bash script and run that instead. But I want to be able to change those npm start scripts without having to manually change the bash script every time. Is there a way to do this?
The following is not concurrent; however, you can change the npm start scripts with this approach.
I should mention also that it's not the world's most scalable approach. But it's simple, so I thought it might be helpful to share.
Here goes ...
Main package.json:
...
"scripts": {
"start": "cd Sub-project-1 && npm run start && cd ../Sub-project-2 && npm run start && cd ../ && <parent project start script here>"
}
With this script, you're just meandering through the sub projects and then coming back up to run the parent project's script.
1.You can also write a python script that parses all the package.jsons of the subdirectories and then generate the master package.json file
2.or You can also write a python script that parses all the package.jsons of the subdirectories and then generate a shellscript where the mater package.json
will call it in the "start".
I am trying to lint all my javascript files using jshint with an npm script command.
I am running on windows and no matter what wildcard I specify I can't seem to lint more than one file.
Referencing a specific file works:
"scripts": {
"lint": "jshint app/main.js"
}
But all of the following results in errors:
"scripts": {
// results in Can't open app/**/*.js'
"lint1": "jshint app/**/*.js",
// results in Can't open app/*.js'
"lint2": "jshint app/*.js",
// results in Can't open app/**.js'
"lint3": "jshint app/**.js",
}
Although you can't use the wildcards when running jshint as a script task in npm on windows, you can work around it. By default, if jshint is passed a directory, it will search that directory recursively. So in your case you could simply do:
"script": {
"lint": "jshint app"
}
or even
"script": {
"lint": "jshint ."
}
This will result in all files - including those in node_modules being linted - which is probably not what you want. The easiest way to get round that is to have a file called .jshintignore in the root of your project containing the folders and scripts you don't want linted:
node_modules/
build/
dir/another_unlinted_script.js
This is then a cross-platform solution for jshint as a script task in npm.
I'm trying to get r.js to optimize all my Require-related files but am getting an error.
My site is in a directory called "myCrazysite" and is structured like this :
(not all the files)
myCrazysite
js/
buildform.js
search.js
app.build.js
vendor/
jquery
r.js
app.build.js looks like this:
({
appDir: "../",
aseUrl: "js",
optimize: "none",
dir: "buildOut",
modules: [
{
name: ["buildform", "search"]
}
]
})
I'm going into js/ and runningnode ../r.js -o app.build.js. I've also globally installed the CLI tool with npm and run r.js -o app.build.js from same directory.
When I do either of these two things, I get the following error:
ENOENT, no such file or directory '/Users/me/Sites/myCrazysite/node_modules/.bin/bower'
at Object.fs.statSync (fs.js:684:18)
The steps I've taken are:
navigated to to the above mentioned ".bin" directory on the CLI..the
bower directory is there.
upgraded to node v0.10.18
uninstalled & reinstalled bower
uninstalled the CLI tool and run node ../r.js -o
app.build.js
globally reinstalled the CLI tool back, deleted r.js
from the site root, navigated to js/ and run r.js -o app.build.js
I'm using require v.2.1.8.
Never mind...I figured it out.
The issue was that the .bin/bower file was causing some conflict and just needed to be deleted. It was a stray shortcut file from (I think) a bower-related grunt plugin. As I wasn't using the plugin, I just used npm to uninstall it, then hard-deleted the file .bin/bower.
Moral of the story: the command line always tells you what to do...usually.