I need to build the puppeteer from source, I have checkout the source below Github repo.
https://github.com/GoogleChrome/puppeteer
Can anyone guide me to build it from source.
The puppeteer source has a build command on it's package.json here.
Easiest way would be to git clone, change codes, build it with yarn run build then use yarn link.
Then where you want to try it, you can use yarn link puppeteer wherever you want to use your local version.
Related
I am new to SCSS. I love using SASS for my local development, but when I publish a client’s website and need to make a change, it’s a pain to have to dig out the old project and set everything up so I can edit locally and then publish those changes on the production site.
Currently, I make changes in the SCSS file and then I go to online SCSS to CSS converter tool and convert SCSS to CSS and then put that CSS into CSS file.
Is there any way that if I make a change in the SCSS file in the server then it should directly update the CSS file?
Currently, I use HTML, CSS, SCSS, and Javascript
Thanks,
Use sass package instead of VSCode Extensions like Live SASS Compiler.
Why should not we use "Live SASS Compiler" VSCode extension?
Live SASS Compiler extension is old and hasn't been updated for a while.
Some features like #debug, #warn, #error won't work, so if you are using it, you have to use the sass npm package for that.
So, How to install the sass package?
So simple, just run these commands.
npm install -g sass
And convert SASS to CSS automatically by running the below command on your terminal.
sass -w source/stylesheets/index.scss build/stylesheets/index.css
More information is available on the sass docs here
Source - https://pineco.de/the-simplest-sass-compile-setup
By - Adam Laki
Make sure your project has a package.json file (and you have Node installed on your machine). Run npm init if you have Node but not package.json file, to initialize one.
Install sass package:
npm install sass --save-dev
Learn more about the package and its CLI
In the package.json file's scripts section, add these:
"scripts": {
"sass-dev": "sass --watch --update --style=expanded assets/css",
"sass-prod": "sass --no-source-map --style=compressed assets/css"
},
Run scripts:
npm run sass-dev
// or
npm run sass-prod
What is a source map? A particular file that allows the browser to map back from the processed, concatenated files to the original ones. It is helpful because we can see the original file names when we debug the CSS in the developer tools.
The above is a very basic setup to compiling SCSS files and "watching" them for changes. Your server should have a pipeline or some sort of build system that it would be able to run this npm command in order to compile SCSS files, so theoretically you don't need to push your pre-compiled CSS files to the server, but it does it by itself.
Is there any way how to refresh (local?) page in browser (Chrome?) during development after change and save on disk? I think node.js is the direction?
Yes, you can use gulp for that. Install gulp (npm install gulp --save-dev) and use gulp.watch to watch file changes, then use browser-sync (npm install...) to reload the browser when files change.
Note that gulp takes some getting used to. See https://browsersync.io/docs/gulp for more info.
I'm creating a yeoman generator for my web projects.
But I wonder how I can try and test my changes before publishing it?
Since I have installed it once, it will not run my local development version, instead it runs my installed version.
Any suggestions on how can test-run my local development version?
I finally found some information on how to accomplish this:
if you wish to develop on the generators code base, and debug locally, a common way to do so is to rely on npm link
git clone the generators repo locally
cd into that repository and run npm link. It'll install required dependencies and install the package globally, using a symbolic link to your local version.
If you want to install sub generators, you need to do so in the context of a yeoman-generator package linked earlier. Cd into the sub generators package you have cloned locally and run npm link.
We now have everything linked and known on the system, we now need to link the sub-generator repo into the parent one, yeoman-generator cloned and linked in step 1 & 2.
https://github.com/yeoman/generator/wiki/Testing-generators
EDIT:
Updated link for info: https://yeoman.io/authoring/index.html
If by "running locally" you mean the ability to test your generator and its flow you can simply do this.
In your project directory folder run npm link. If this passes in flying colors, go to step 2.
Open a terminal and cd into the folder you wish to initiate a project.
Run yo generator-theNameOfYourGenerator. This will run your generator.
I am currently creating a portable consolidation of my workflow using Node-Webkit which has node.js embedded. Now my problem is getting grunt/gulp inside the project itself as it depends on the cli somewhat(avoidable, granted), and also is confusing to me on the architecture. Is it possible to find just a .js with grunt in it to include much like Jquery/Handlebars?
Is this all I need to just include and run?
No before that make sure you environment is up, get the package.json, GruntFile.js file. In GruntFile.js you can specify what you want to pre-process. For example jade,Less,coffee. It looks very much like a node function, for sample you can refer to link
Now to make this work you also need to install various contrib plugins as per your requirement. Then register every single task in GruntFile.js. It really speeds up the development.
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-jade');
grunt.loadNpmTasks('grunt-contrib-coffee');
grunt.registerTask('test', ['jade', 'less','coffee']);
So to process less,jade,coffee, we need to run the module installations such as
npm install grunt --save-dev
npm install grunt <module name> --save-dev
There are many more interesting configurations to learn and documentation is really nice, please refer to getting started guide
This adds the required Grunt and grunt plugins to package.json
If I want to install a package into Sublime Text 2, I can use the Package Control plugin. But say I want to install a package that is not available through that means.
I am told to 'git clone' from github and the command line is usefully included eg:
git clone https://github.com/mpmont/ci-snippets.git ci-snippets
But I cannot find an explanation of how to use it. I've tried pasting it into the console but just get 'Syntax Error'
I'm using Windows 7.
Help!
You have to install git first.
After you have installed (msys)git, open windows explorer, right click on your target folder and choose "Git Bash". In this shell you can use
git clone https://github.com/mpmont/ci-snippets.git ci-snippets
to clone the repository.
Realize you may just be cloning but you may also add the repository to package control, then install it through that.
To add a repository through package control, open the command palette and enter Package Control: Add Repository. Then input the URL. Note this URL should not contain the .git extension. Then, you can install the package via package control as you would with any other package. Of course, cloning also works, but just thought I would throw this out there if you didn't want to worry about doing all the git stuff.