Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fsspencer/magento2-gulp-package
Custom theme package to integrate Magento 2.x with Gulp-Sass-Minify-Image optimization-Livereload-Notify — Edit
https://github.com/fsspencer/magento2-gulp-package
Last synced: about 2 months ago
JSON representation
Custom theme package to integrate Magento 2.x with Gulp-Sass-Minify-Image optimization-Livereload-Notify — Edit
- Host: GitHub
- URL: https://github.com/fsspencer/magento2-gulp-package
- Owner: fsspencer
- License: gpl-3.0
- Created: 2016-05-20T15:20:20.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-07-03T17:16:51.000Z (over 7 years ago)
- Last Synced: 2023-10-22T13:38:17.727Z (about 1 year ago)
- Language: JavaScript
- Size: 52.7 KB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Gulp Package for Magento 2.x
This is a simple skin package for Magento 2.x to let you implement the following features to make you able use a quicker and fancy method of coding.
- Gulp
- Sass
- Css minifier
- Js minifier
- Image optimizer
- Livereload
- Bootstrap
- Font Awesome
### Version
1.0.0
### Requirements
You need to install the following dependences on your local environment to make this work.
* [node.js] - evented I/O for the backend. Download the latest version on https://nodejs.org and install it
* [Gulp] - the streaming build system. Once you get NodeJS installed, make sure you can use the command "npm" on your terminal. Then install gulp
### Installation
Once you installed node.js, you need Gulp installed globally (maybe you need to use admin privileges with sudo):
```sh
$ npm install -g gulp
```
Let's create a new skin package on your magento2 project.
```sh
$ cd [magento-root-directory]
$ cd app/design/frontend/[your-vendor-name]/[your-theme-name]/
$ git init
$ git remote add remote [git-repo-url]
$ git pull remote master
$ npm install -d
```
All the dependences will be downloaded to a new directory called node_modules, which should be added to your .gitignore file (in case you are using git).
Download and install LiveReload Chrome Extension from the Chrome Web Store.
Run the gulp watcher
```sh
$ gulp watch
```
For sass you need to modify/add/remove scss files on scss/base, scss/helpers or scss/modules. Everytime you make a change on a single scss file, changes will be appended to the css/styles.css file.
Same with javascript files.
Every script file you want to add, you need to do it on js/csutom. There is a sample file called _my_custom_scripts.js. Whenever you add or remove js files, you need to edit you gulpfile and append the file list on the array at line 46.
Such as scss files, every js modification you made, will be appended to js/script.js.
### Implement on Magento
To make this work on Magento, you need to add css/styles.css and js/script.js at the head of each module you want. If you want to apply them on every Magento page, you need to add it on the default.xml layout file, as it comes with this package.
That's it! Have a happy coding!
For more information: www.codealist.net
### IMPORTANT (For Ubuntu users)
If you can't use gulp command on your terminal or you are receiving the error "No such file or directory...", try the following:
```sh
$ sudo apt-get --purge remove node
$ sudo apt-get --purge remove nodejs
$ sudo apt-get install nodejs
$ sudo apt-get install npm
$ sudo ln -s /usr/bin/nodejs /usr/bin/node
```
That should work!