I have following setup under my project:
/assets/scss has many SCSS files organized under different subdirectories; including a root global.scss file. As you can imagine, global.scss will only have #imports.
/assets/css is set as output directory. I am trying to output only one file under this folder - global.css.
package.json has this command
"scripts": {
"scss": "node-sass --watch assets/scss/styleguide.scss -o assets/css --recursive"
}
When I run npm run scss it outputs subdirectory CSS files as well. Does anyone know how to avoid output of subdirectory sass files?
Thanks in advance!
You are passing the --recursive argument to node-sass. That will mean that node-sass will search recursively on every directory under assets/scss and will compile all the scss files found. To avoid that behavior just remove the --recursive option:
"scripts": {
"scss": "node-sass --watch assets/scss/styleguide.scss -o assets/css"
}
More about node-sass usages and options can be found here.
Related
I have following npm script in the package.json:
"scripts": {
"upload:js": "onchange \"dist/js\" -- echo {{changed}} && node sp-asset-upload.js {{changed}} 3",
"start:message": "echo 'Watching for code changes. Start making changes!'",
"watch:js": "onchange -f \"add change\" \"dev/scripts/**/*.js\" -- npm-run-all clean:js buildjs:main buildjs:slick-init",
"watch:uploadjs": "npm run upload:js",
"watch": "npm-run-all start:message watch:js watch:uploadjs",
"start": "npm run watch"
}
The sp-asset-upload.js is some javascript that relies on spsave package to upload files to SharePoint.
I am interested in uploading only the files that have recently changed, rather than all files (that may or may not have changed) in the dist\js folder.
I am using the onchange package to watch for changes. I need to basically capture the files that changed and pass that as parameter to the sp-asset-upload.js file instead of doing the below:
node sp-asset-upload.ms "dist/js/*.js" 3 - where the number parameter determines whether to upload a minor copy or major version to SharePoint.
Can someone who might have done this share some insight?
Simple one, but could not find the answer anywhere online! Installed sass globally (npm install -g sass) on my Mac.
This works as expected:
sass style.scss style.css
Then I try:
sass --watch style.scss:style.css
And get:
Could not find an option named "watch".
Usage: sass <input> [output]
--[no-]stdin Read the stylesheet from stdin.
--[no-]indented Use the indented syntax for input from stdin.
-I, --load-path=<PATH> A path to use when resolving imports.
May be passed multiple times.
-s, --style=<NAME> Output style.
[expanded (default), compressed]
-c, --[no-]color Whether to emit terminal colors.
-q, --[no-]quiet Don't print warnings.
--[no-]trace Print full Dart stack traces for exceptions.
-h, --help Print this usage information.
--version Print the version of Dart Sass.
What am I missing??
Thanks!!
First create the SASS's folder, and in there create your SASS's file. Example:
sass/styles.sass
In your project root folder, open the console and type the command:
sass --watch sass/styles.sass:css/styles.css
This command will create your CSS's folder and CSS's file. In addition to compiling your .sass content for your .css.
In the end, I gave up on sass as tried above, and went for a solution with webpack.
Another option I tried which worked was to use node-sass.
I solved running this command on your terminal
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
i hope that help
Is it possible to generate fully working sourcemaps using node-sass and postcss autoprefixer when piping output from one to another? I currently have the following in package.json:
"scripts": {
"sass": "node-sass sass/app.scss --source-map true --source-map-embed true",
"postcss:autoprefixer": "postcss --use autoprefixer -b 'last 2 versions' --map",
"css": "npm run sass -s | npm run postcss:autoprefixer -s > css/app.css"
}
This produces a semi-working inline sourcemap, but the links to original files are incorrect, so clicking on them in Chrome devtools won't load them (it seems like they are processed as relative links and then referenced from the css folder). I tried to fix this by adding the --source-map-contents true option to node-sass, but then autoprefixer bugs out, I suspect because it doesn't like the line length of the dataUri.
Ideally I'd prefer to output a separate .map file anyway, but setting the node-sass option to --source-map css/app.css.map doesn't write anything out, presumably because only the css is output to stdout.
Replacing source-map with source-map-root and a filesystem URL seems to do the trick:
"scripts": {
"sass": "node-sass sass/app.scss --source-map-root file://${PWD}/ --source-map-embed true",
"postcss:autoprefixer": "postcss --use autoprefixer -b 'last 2 versions' --map",
"css": "npm run sass -s | npm run postcss:autoprefixer -s > css/app.css"
}
Would still be good to know if it was possible to output separate .map files though!
Update:
Below is the new package.json using exorcist as recommended by RyanZim's comment:
"scripts": {
"sass": "node-sass sass/app.scss --source-map-root file://${PWD}/ --source-map-embed true",
"postcss:autoprefixer": "postcss --use autoprefixer -b 'last 2 versions' --map",
"css": "npm run sass -s | npm run postcss:autoprefixer -s | exorcist css/app.css.map > css/app.css"
}
Try:
sass input.scss:output.css
The command I'm using is
browserify -t browserify-css src\app.js > bundle.js
And css files that are traversed end up as text blobs in the bundle.js files which ultimately get appended as style tags to the head when loaded in a browser.
Is it be possible to output both a bundle.js and bundle.css file, where the bundle.css is just the concatenation of all css files that were traversed?
The src\app.js in this example contains only one require
require( 'app.css' );
You can use the sheetify transform, which outputs code that uses insert-css. Then, use the css-extract browserify plugin to extract the insert-css calls into a separate file.
browserify -t sheetify/transform -p [ css-extract -o bundle.css ] index.js \
-o bundle.js
I have this (in gulpfile.js):
var gulp = require("gulp");
var mocha = require("gulp-mocha");
gulp.task("test", function() {
gulp
.src(["./**/*_test.js", "!./node_modules/**/*.js"]);
});
and it works.
I want to replicate the same behavior, excluding "node_modules" folder, from mocha command, running npm test (in package.json):
"scripts": {
"test": "mocha **\\*_test.js !./node_modules/**/*.js*",
}
and it doesn't work.
I'm using Windows.
Any suggestion?
I was able to solve this using globbing patterns in the argument to mocha. Like you I didn't want to put all my tests under a single tests folder. I wanted them in the same directory as the class they were testing. My file structure looked like this:
project
|- lib
|- class1.js
|- class1.test.js
|- node_modules
|- lots of stuff...
Running this from the project folder worked for me:
mocha './{,!(node_modules)/**}/*.test.js'
Which match any *.test.js file in the tree, so long is its path isn't rooted at ./node_modules/.
This is an online tool for testing glob patterns that I found useful.
You can exclude files in mocha by passing opts
mocha -h|grep -i exclude
--exclude <file> a file or glob pattern to ignore (default: )
mocha --exclude **/*-.jest.js
Additionally, you can also create a test/mocha.opts file and add it there
# test/mocha.opts
--exclude **/*-test.jest.js
--require ./test/setup.js
If you want to exclude a particular file type you could do something like this
// test/setup.js
require.extensions['.graphql'] = function() {
return null
}
This is useful when processing extensions with a module loader such as webpack that mocha does not understand.
For Windows users
This script will run perfectly
"test": "mocha \"./{,!(node_modules)/**/}*.test.js\"",
I hope this will help.
cheers!
I'm not a guru on mocha or ant-style pattern but maybe it isn't possible escluding specific path in the mocha command line.
You can put all your test files under a test folder, and set your package.json like this:
"scripts": {
"test": "mocha ./test/**/*_test.js"
}
You can also provide more than one starting folder:
"scripts": {
"test": "mocha ./test/**/*_test.js ./another_test_folder/**/*_test.js"
}
As of 2019 the modern way of configuring Mocha under Node is via config file in your project root (e.g. via .mocharc.js).
Here is the example of the .mocharc.js that
rederfines the default test directory (spec key) and
excludes the example (or can be any experimental tests) from the overall suite (exclude key).
module.exports = {
'spec': 'src/front/js/tests/**/*.spec.js',
'exclude': 'src/front/js/tests/examples/*.spec.js',
'reporter': 'dot'
};
As you may see there can be more options used in the config. In part they are just replicas of Mocha CLI options. Just look up ones what you like and try to use within .mocharc.js (use camelCase for dash-comprising CLI options). Or see the config examples.
As suggested in a comment by #thebearingedge, in the end I put ALL the source files (with the relative test files) in a new "src" dir.
In this way I can define the root for tests with a path that exclude by default the "node_modules" folder.
.
├── src
├── fileA.js
├── fileA_test.js
├── fileB.js
├── fileB_test.js
├── node_modules
├── ...
I had to update the path in the package.json, gulpfile.js and in some batch files that I use as utilities.
Changes in gulpfile.js:
.src(["./src/**/*_test.js"]);
and in package.json:
"test": "mocha src\\**\\*_test.js",
Simple change and it works.
I'm free to choose whatever naming conventions I like.
Each test files remain close to the relative JS file.
I had a spec directory containing all my specs. Within that directory, I had several sub-directories, one of which was the e2e specs directory. In that scenario, I used the mocha specs $(find specs -name '*.js' -not -path "specs/e2e/*") command to run all my tests ignoring those within the e2e directory.