Visual Studio npm install on TFS get-latest - visual-studio

When TFS "get latest" pulls in a package.json change that adds a dev dependency, Visual Studio 2017 doesn't automatically run "npm install". This breaks any gulp tasks in "watch" mode that depend on the new package.
The only way I can see to cause an npm install is to manually touch package.json or restart VS.
Is there a way to trigger "npm install" on "get latest"?

Here is a wireframe of the solution I settled on. tl;dr - implement my own package.json watcher in Gulp to stop Webpack, run npm install, and restart Webpack.
const gulp = require('gulp');
const install = require('gulp-install');
const watch = require('glob-watcher');
const webpack = require('webpack');
gulp.task('default', ['webpack']);
gulp.task('webpack', function () {
// Start the initial Webpack build.
let webpackCompiler = webpack({
// ...
watch: true
// ...
});
// Set up a watcher to kill Webpack, run 'npm install', and restart Webpack when package.json changes.
let packageWatcher = watch('./package.json', { events: ['change'] }, () => {
packageWatcher.close();
console.log('Stopped package.json watcher.');
webpackWatcher.close(() => {
console.log('Stopped Webpack watcher.');
gulp.start('npm-install-then-webpack');
});
});
console.log('Started package.json watcher.');
});
gulp.task('npm-install', function (callback) {
gulp.src('./package.json')
.pipe(install(callback));
});
gulp.task('npm-install-then-webpack', ['npm-install'], function () {
gulp.start('webpack');
});

Related

Nested scss variables not compiling with gulp

I'm using gulp to compile my scss files. Everything worked until I got a new laptop, and now the nested variables aren't compiling.
For example, none of these colors compile:
$theme-colors: (
primary: #002d72,
secondary: #53565a,
purple: #4e2984,
light-purple: rgba(78, 41, 132, .8),
light-blue: #69b3e7,
error: #d72f09
);
Example of how a "theme color" would be called:
h3 {
color: theme-color("primary");
}
I had to re-install npm and gulp, so I am obviously using different versions of these two packages then I was previously.
Here are the versions:
npm: 8.5.0
gulp: CLI version: 2.3.0
         Local version: 4.0.2
node: v16.14.2
My gulpfile looks like this (it handles scss and js files):
/* file: gulpfile.js */
var gulp = require('gulp');
var sass = require('gulp-sass')(require('node-sass'));
const minify = require('gulp-minify');
var concat = require('gulp-concat');
gulp.task('sass', function(){
return gulp.src('resources/assets/styles/**/*.scss')
.pipe(sass()) // Using gulp-sass
.pipe(gulp.dest('dist/styles'))
.pipe(minify({
ext: '.css',
mangle: false,
noSource: true
}))
});
gulp.task('compress', function() {
return gulp.src('resources/assets/scripts/*.js')
.pipe(concat('main.js'))
.pipe(minify({
ext: '.js',
mangle: false,
noSource: true
}))
.pipe(gulp.dest('dist/scripts'));
});
gulp.task('watch', function() {
gulp.watch('resources/assets/styles/**/*.scss', gulp.series('sass'));
gulp.watch('resources/assets/scripts/**/*.js', gulp.series('compress'));
});
Note: I added require('node-sass') to get gulp to work on the new computer.
If anyone has an idea of what's wrong here, it would be a huge help!
thanks!
Jill
The issue was caused by a discrepancy in the bootstrap node module versions. When the site was first built, it installed bootstrap version 4.3.1. After getting a new laptop and re-installing all the node modules, bootstrap 5.1 was installed.
Not exactly sure why bootstrap would affect scss variables, so if YOU know feel free to enlighten me.
To update the bootstrap version number, navigate to the directory containing the node_modules and run, npm install bootstrap#<version-number> --save

do you have to run npm run production when installing a new package?

I'm quite new, I need help.
https://github.com/tailwindlabs/tailwindcss-aspect-ratio
I have a laravel 8 project in production. I have installed this package and in local it works fine, but when I upload it to production it doesn't work. This package requires the installation of a plugin in the tailwind.config.js file.
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
purge: [
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
theme: {
extend: {
},
},
variants: {
extend: {
opacity: ['disabled'],
},
},
plugins: [require('#tailwindcss/forms'), require('#tailwindcss/typography'), require('#tailwindcss/aspect-ratio'), ],
};
I have to run npm run production in production?
Thank you very much
does your webpack file create a .js file in the public directory? This is the file you need to upload after you run the npm run production
sometimes it helps to press ctrl when reloading as the browser may cache the old js files.

CSS isn't working in production environment with Laravel Mix 5

This is for my Laravel + Vue SPA app.
I have this Laravel Mix config file here:
const path = require('path');
const fs = require('fs-extra');
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
require('laravel-mix-bundle-analyzer');
function publishAssets() {
const publicDir = path.resolve(__dirname, './public');
if (mix.inProduction()) {
fs.removeSync(path.join(publicDir, 'dist'));
}
fs.copySync(path.join(publicDir, 'build', 'dist'), path.join(publicDir, 'dist'));
fs.removeSync(path.join(publicDir, 'build'));
}
mix.js('resources/js/app.js', 'public/dist/js')
.sass('resources/sass/app.scss', 'public/dist/css').options({
postCss: [tailwindcss('./tailwind.config.js')],
processCssUrls: false,
});
// alias the ~/resources folder
mix.webpackConfig({
plugins: [
// new BundleAnalyzerPlugin()
],
resolve: {
extensions: ['.js', '.json', '.vue'],
alias: {
'#': `${__dirname}/resources`,
'~': path.join(__dirname, './resources/js'),
ziggy: path.join(__dirname, './vendor/tightenco/ziggy/dist/js/route.js'),
},
},
output: {
chunkFilename: 'dist/js/[chunkhash].js',
path: mix.config.hmr ? '/' : path.resolve(__dirname, './public/build'),
},
});
mix.then(() => {
if (!mix.config.hmr) {
process.nextTick(() => publishAssets());
}
});
It works fine with npm run watch, but when I do npm run production, the CSS doesn't work. The site loads and works, but the CSS is missing.
Can anyone see what in my code is causing it?
Here's my spa.blade.php:
<link rel="stylesheet" href="{{ mix('dist/css/app.css') }}">
...
<script src="{{ mix('dist/js/app.js') }}"></script>
In the network tab of Chrome dev tools, the CSS file is 270kb in develop environment and 42kb in prod environment.
Something is getting translated wrong.
In my case, it cause by setting wrong property "purge" in tailwindcss config file.
When I ran "npm run hot" or "npm run dev", the website was fine.
But it broke when I ran "npm run prod".
It seems the dev mode ignore the property "purge".
I'm calling this solved for now because my site started working.
it was extremely difficult to navigate since I had 6 months of work on a dev branch, and it worked via npm run watch. When I merged into master, npm run production loaded incorrectly--the styles were half there and half missing.
The solution was to downgrade from tailwindcss#1.9 to tailwindcss#1.4.
Along my way, I read something about postcss or something not working with the --no-progress flag which is on npm run production.
A person could try removing that flag, but I already downgraded tailwind so I didn't try that.

Trying to run a Gulp script that needs ruby on PHPStorm

I've edited a simple Gulp pipeline (that i've tested and works outside the IDE) and i'm now trying to include it into PHPStorm Project in order to achieve a better css workflow in a real project.
This is the script, (it's a simple css optimization pipeline):
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload'),
del = require('del');
// Styles
gulp.task('styles', function() {
return sass('../scss/base.scss', { style: 'expanded' })
.pipe(autoprefixer('> 1%, last 2 versions, Firefox ESR, Opera 12.1'))
.pipe(minifycss())
.pipe(gulp.dest('../css'))
.pipe(notify({ message: 'Styles task complete' }));
});
// Clean
gulp.task('clean', function(cb) {
del(['css/base.css'], cb)
});
// Default task
gulp.task('default', ['clean'], function() {
gulp.start('styles');
});
The annoying problem i cannot solve is related to the module sass that is the missing a proper ruby environment initialization, needed in order to run the command.
sass = require('gulp-ruby-sass') ->
'sass' not recognized as an internal or external command.
As i said before, I managed to run this gulp script using an external shell link from the ruby installer:
Start Command Prompt with Ruby
C:\Windows\System32\cmd.exe /E:ON /K C:\Ruby21\bin\setrbvars.bat
Do you have any clue on how to run gulp scripts that needs ruby inside PhpStorm?
Thanks in advance,
Please make sure that Ruby is in your system PATH - in Control Panel, go to System properties, Advanced, press Environment variables, in System variables section select PATH and append C:\Ruby21\bin to it. Make sure to restart PHPStorm after changing PATH

How do I install Sinon?

Bashing my head against the wall:
Add
"sinon" : "latest"
to my bower.json. Install it.
Add sinon to my karma server:
files: [
'vendor/assets/bower_components/sinon/lib/sinon.js',
]
Paste the demo expectation into my spec:
it("calls the original function", function () {
var callback = sinon.spy();
var proxy = once(callback);
proxy();
assert(callback.called);
});
and:
TypeError: 'undefined' is not a function (evaluating 'sinon.spy()')
Why is this? How do I install sinon? Why haven't they bothered with an installation section on their github page?
I came to the same issue, and did the following :
in a command prompt, navigate to the root of your project and type :
npm install karma-sinon --save-dev
then in your karma.conf.js file add the following:
frameworks: ['jasmine', 'sinon']
It worked for me

Resources