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
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.
I'm having trouble with electron-compile.
The docs state
How does it work? (Easiest Way)
Change your reference to electron-prebuilt to electron-prebuilt-compile. Tada! You did it.
What reference, where? You can't be talking about package.json?
I've always run electron using supervisor -x "electron" -i "./" .
What am I completely missing / what should be the contents of my pull request to make this clearer?
I've installed electron-compile with npm i electron-compile --save-dev
I'd like to have es2015/jsx precompiled to es5, so that I can run a react application in electron. electron-compile appears to solve this problem.
You should install Electron as a dev reference in package.json, yes:
npm install --save-dev electron-prebuilt-compile
Don't install Electron as a global because then other people have to set stuff up to run your app (i.e. they now have to micromanage which version of Electron they have installed globally)
With the recent versions (electron 1.3.5), I was unable to get electron-prebuilt-compile working, well it works for development but packaging for production has no real working examples.
It seems the compiling and packaging needs to be done manually, so in case anyone needs a working example, it's here. Hope to save someone some time and pain.
I want to know what is exact use of npm, grunt etc. in front-end development?
Why and how to use it?
NPM is a Node Package Manager - you can think of it as a way to automate a lot of installations for you by a single command using the CL (command line). Otherwise you would have to install all the scripts manually, which is generally rather messy, since they are often not as user-friendly as say... game or standard program installations.
Grunt/Gulp/Broccoli/etc. - While I am not using it myself, from what I heard and read: It is a tool, that can help you automate numerous tasks, you would have to normally do manually. Anything ranging from compiling any CSS/HTML/JS preprocessor, concatenating different files together into one big file, watching for changes in files to automatically upload them to a server and so on. Basically it is a highly configurable tool meant to help you automate mundane and boring tasks.
Actually, NPM is a package manager what allows you to download a lot of packages of software such as Gulp and Grunt, but also Bootstrap etc with the command line. You have to install node.js for this. You don't need this as a front-end developer but it will make installing the software much easier than install it manually which take mostly more time.
https://docs.npmjs.com/getting-started/what-is-npm for npm
https://www.npmjs.com/browse/star for popular modules
Software such as Grunt and Gulp will help front-end developers mostly with compiling SASS and LESS, CSS preprocessors which saves you time and allows you to have more functions in your css. Grunt, Gulp etc runs in the command line and makes it easier to edit your files. For example, I use myself Gulp in combination with SASS. Because SASS has to compile to css I have set up a command which automatically compiles my SASS files to a CSS file if I hit the save button in my code editor, the SASS:Watch plugin.
I highly recommend using SASS, and so using Gulp or Grunt.
http://sass-lang.com/documentation/file.SASS_REFERENCE.html SASS documentation
http://gulpjs.com/ Gulp documentation
http://gulpjs.com/plugins/ plug ins for gulp
Recently I deployed some projects like trntv/yii2-starter-kit and so on.but all applications are publishing assets on '#vendor/bower' instead of'#vendor/bower/bower-asset'. I have read the question Yii2 Composer manage package in bower and bower-vendor and solved it . but I still feel confused about the directory vendor/bower/bower-asset.
What's the part does bower/bower-asset play in php application? it is not a composer package but many theme store in there. Furthermore, bower is a dependency management for javascript just like Composer for PHP , but how does it solve dependency for js package by PHP on this occasion that I have not install node.js environment?
The idea of Composer Asset Plugin is to download Bower / NPM packages and manage their dependencies without having Node JS, Bower and NPM installed (through PHP / Composer). Also it adds possibility to add JavaScript dependencies for PHP packages that use JavaScript libraries.
See for example yii2-bootstrap Yii2 extension (PHP) has a dependency on Bootstrap (JS + CSS):
"bower-asset/bootstrap": "3.3.* | 3.2.* | 3.1.*"
When you run composer install or composer update, all JS dependencies will be installed to vendor/bower folder.
This is built into the core, but very ambiguous, receives a lot of criticism and there are plans to remove it in 2.1.0 (as far as I remember, it was included before release of 2.0 even it was unstable). Unfortunately this is required and there is no normal way to disable it.
You can read more info on the extension's Github page.
As for folder name, it should be named bower, not bower-asset, if you installed everything correctly.
It's named like so automatically, make sure you have the latest version of plugin:
composer global require "fxp/composer-asset-plugin:~1.1.1"
I'd recommend to even switch to:
composer global require "fxp/composer-asset-plugin:*"
If you have problems or errors, execute:
composer global remove "fxp/composer-asset-plugin"
Then reinstall it again, delete vendor and composer.lock in your application folder and run:
composer install
when you generate a yeoman project, do you commit the node_modules that is generated into your code repository?
It seems like it is necessary for another developer to check out a project and develop from it, but it seems like a lot of files to commit which seem unrelated to a project itself.
You can just run npm install to get the dependencies installed. However there are multiple benefits to committing your dependencies, which you can read about in this blog post:
Checking in front-end dependencies (for Bower, but applies to npm too)