How can configure grunt-sass to also watch for changes using the underlying node-sass watch option?
I understand I can achieve the same functionality with grunt-contrib-watch to watch for changes and re-run the grunt-sass task, but that will be slower since it will recompile the whole thing instead of just compiling the changes.
Thanks!
Answering my own question, in case this can help anyone else:
The only way I found solving this, is using the node-sass CLI through grunt. To achieve this, install the amazing grunt-exec task and set it to run a command with the --watch option.
An example usage (with support for several includePath directories):
exec: {
nodeSass: {
cmd: function() {
// Include path option string built from the gruntConfig.cssFiles array.
var includeFilesOption = gruntConfig.cssFiles.map(function(cssFilePath) {
return '--include-path ' + cssFilePath;
}).join(' ');
return 'node-sass app/scss/style.scss app/generated/style.css' + includeFilesOption + ' --watch';
}
}
}
You will also need to install node-sass via npm. In that case, you can simply add the following to your package.json file:
"scripts": {
"install": "npm install node-sass -g"
},
Related
how can I run pure gulp sass? I'd like to have installed just node modules and gulp and run some port of sass using watch. I'd like to avoid ruby version of sass. Is it possible? I run windows but i'd like the solution to be cross-platfom, which shouldn't be problem for node.
Thanks.
if you are looking for the seemlest and lightest solution without the needs of writing any gulp scripts, you can simply use node-sass and npm scripts.
For example in your package.json :
{
"scripts": {
"sass": "node-sass -w ./path/to/entry-point.scss ./path/to/build.css",
},
"devDependencies": {
"node-sass": "^4.5.3"
}
}
The -w is for the watch feature based on your entry parameter.
Then, simply :
$ npm run sass
// or
$ yarn sass
Check the CLI documentation for more informations.
I hope, it will help !
I'm attempting to get Gulp up and running on MacOS 10.12.3. However, no matter what I do, I am getting the following error: No Gulp File Found.
I have done the following:
Installed gulp cli globally via sudo bash. Gulp version as of this writing is 3.9.1
Installed gulp locally via npm install gulp. Gulp version as of this writing is 3.9.1.
I've done the touch gulp command. This has created a 0kb blank gulp file.
I've created a test gulp.js file in my root directory. The code for said file looks likevar gulp = require('gulp');
Any thoughts on what's going on here?!
Your gulp file needs to be called gulpfile.js, not gulp.js.
While you're at it, I also recommend initializing npm by running npm init (it will walk you through it… just use all the defaults for now), and then adding gulp to your package.json by running npm install --save gulp. This will add
"dependencies": {
"gulp": "^3.9.1"
}
to your package.json.
What's the point of this? npm's package.json's "dependencies" becomes a list of all the gulp-related plugins your project needs. Any time you need to recreate the project, all you need is that package.json and you can run npm install to install them.
Note that even after renaming your file, you'll get the error
Task 'default' is not in your gulpfile
At the very least gulpfile.js will have to include the line gulp.task('default');… but if that's all your gulpfile has, you won't actually be doing anything with gulp.
I highly recommend working through css-trick's Gulp for Beginners - it doesn't take long, and you'll come out with a much more complete understanding of how to use gulp.
I am building(mvn) my project using Jenkins. Jenkins configured to run npm install and bower install. So each and every time when I build my project, the npm install will run, so the build time is more every time. So I thought to run npm install only if there is any changes, like new package is added, version changes or anything got removed etc., in package.json.
I googled a lot to find out a way to achieve this, but failed.
Is there any plugins which I can use to achieve this?
Can anyone help me to find out a way to do this?
Thanks in advance.
I had the same problem as you and wrote npm-install-changed.
Install with npm install -g npm-install-changed, and run npm-install-changed instead of the usual npm install.
Let me know if it works for you.
If you are using Pipeline syntax, then you can use a built-in condition to execute the stage if the build’s SCM changeset contains one or more files matching the given string or glob. Example:
stage('Install dependencies') {
when {
changeset "package.json"
}
steps {
sh 'npm install'
}
}
The when directive allows the Pipeline to determine whether the stage should be executed depending on the given condition.
You can also run npm install and npm build only if the code has changed.
stage('Build') {
when {
anyOf {
changeset "src/**/*.ts"
changeset "package.json"
}
}
steps {
sh 'npm install'
sh 'npm build'
}
}
The anyOf execute the stage when at least one of the nested conditions is true.
Hope it helps
We can use the Jenkins environment variables if using Git and run a command like this
git diff --name-only $GIT_PREVIOUS_COMMIT $GIT_COMMIT | grep package.json && npm install
This will run NPM install only when there is a change in package.json
I'm using three.js and there are a number of useful files under the examples/ directory that I wish to include in my project. Unfortunately, examples/ is listed under the ignore property of the three.js bower.json config file.
Is there a straightforward way to install specific files under examples/ with Bower?
Whole idea that is behind bower is to focus only on main library files.
From my point of view you have options:
use derivative package via npm instead of bower and in your code reference from node_modules directory - for example https://www.npmjs.com/package/three.js
create your own npm package based on npm/bower and use it the same way
There are a few options for your specific case.
Perhaps the easiest for your scenario is to install threejs-examples using bower to get the examples directory. This is best used in combination with threejs-build to ensure consistent versions of threejs.
bower install threejs-build threejs-examples
Alternatively you could install the whole git repository and copy out what you need (may take some time)
bower install mrdoob/three.js
Or you could use a grunt task like grunt-bower which can install only the packages you require by using the packageSpecific and files options.
The following grunt snippet will copy only orbit controls from the examples directory
bower: {
dev: {
dest: 'components/',
options: {
packageSpecific: {
'threejs': {
files: [
'examples/js/controls/OrbitControls.js'
]
}
}
}
}
},
I have developed a node.js npm module, developing under Windows. Today I wrote some Mocha tests. After many struggles, it seemed that for npm test to work, package.json had to look like this: (there may be other options???)
"scripts": { "test": "node node_modules/mocha/bin/mocha" }
instead of what's in all the Unix based books,
"scripts": { "test": "./node_modules/.bin/mocha" }
How can I set package.json up to work on both Windows and Unix? I'm assuming that Travis-CI runs Unix, so, should I link the build to that, it will blow up with the Windows version.
I found a two year old thread where somebody requested a feature for exactly this. That thread seemed to die out. This SO question seems to be close, but it isn't exactly what I want and, frankly, I can't understand the answer. :-( Can anybody clarify?
For the time being, I am going
"scripts": {
"test": "node node_modules/mocha/bin/mocha",
"testOnUnixUseThis" : "./node_modules/.bin/mocha (I think)",
"testOnWindowsUseThis" : "node node_modules/mocha/bin/mocha"
},
Unfortunately, you cant go npm test testOnWindowsUseThis or npm testOnWindowsUseThis. And it doesn't fix the Travis-CI issue. But at least a person who downloads the module can (hopefully) see what is going on.
Any better ideas? Am I the only person still developing under Windows??? :-)
I've always been able to npm install -g mocha or npm install mocha and then just add
"scripts": {
"test": "mocha spec"
}
to package.json. That may or may not work in EVERY environment. I know, for instance, with lineman, you have to use bin/mocha. Also, if you don't find a way around this, set your test script up for Unix and then add a second script called "wintest" or something that does whatever you need it to do in Windows. You can name your scripts whatever you want. The default ones (test, start, etc.) can be used with npm [command]; any non-standard ones (like wintest) can be used with npm run-script [command], and they will still work.
A little back story on how/why this works:
When you install a module globally, it's available on PATH (or whatever the windows equivalent is). When you install a project dependency, if that module has any binaries, those are symlinked to node_modules/.bin and when you run npm run [some-command], npm helpfully adds node_modules/.bin to PATH for that command. So when mocha is installed globally "test": "mocha spec" uses your globally installed mocha to run tests. When it's a project dependency, it uses the one in node_modules/.bin. The one gotcha I've found with this is that npm adds node_modules/.bin to the front of PATH, so local binaries will always take precedence over global ones. Almost all of the time, this is what you want, but it's worth knowing that that's how it works (I recently had a bug related to this).
EDIT:
Not sure at what point in npm history this changed, but npm run <script-name> now works (don't need to do npm run-script <script-name> anymore). Possibly run-script still works as well. I'd expect it to, but I haven't tried it.
How can I set package.json up to work on both Windows and Unix?
If you
use Windows
dislike -g global install
...this is a working solution
"scripts": {
"test": "node node_modules/mocha/bin/mocha.js"
},
Notes:
putting node in front shouldn't harm, and can help on Windows (.js extension is not necessarily registered to the nodejus executable, unless you set it so. Could open a text editor, an IDE or (worse) windows scripting host, Internet Explorer…)
Adressing the script directly saves you from needing a global install. (Not judging if this is a good practice)
forward slashes help running under linux (obviously) and do work under windows (in this scenario. Also avoids a windows pitfall: backslashes if used, would need to be doubled – since they are interpreted as escaping the following letter if used solitary).
Don't use global solution, I suggest you follow what the Mocha guys say:
"scripts": {
"test": "node_modules/.bin/mocha -w"
},
Use npm i mocha --save-dev
This will save the module as a development dependency and npm will automatically set up the executables to be used within the scripts object. If you want to use the executables outside of the scripts defined in package.json, you can install it globally as well, although note that you may end up with different versions of the package.
If you only install it globally, other people won't be happy if they try to run your tests (with the standard npm test)
The new way with latest npm versions after 6.x, you needn't install mocha with global mode any more.
"scripts": { "test": "npx mocha" }
npx is installed automatically with new npm installation. It will search
mocha from node_modules/.bin or $PATH
reference: https://www.npmjs.com/package/npx