In Theme Digital Store I’ve created, I used variables for theme colors, border-radius, border colors, header/columns background and others. scss files available for compilation located in sass Theme folder. It makes the development process easier and flexible. In prestashop it uses “scss” syntax, similar to css, but Sass allows creating variables and mixins and replace similar repeatable styles with variables. In this article I’ll describe how I used Sass in Prestashop Theme development process. Structured or named differently, you may need to adjust the configurationĪbove.Prestashop 1.6 default theme was developed using Sass. That’s everything you need to get started! Please note that if your files are (Make sure it’s enabled by clicking the icon in your browser’s toolbar.) This functionality to work, you can purchase LiveReload or just install the free This tells Grunt to alert LiveReload thatįiles have changed so that it can automatically refresh your browser window. You’ll notice that there are a few livereload flags in the Grunt configurationįile above. Run grunt watch (in your project’s root directory)Īnytime you want Grunt to start watching your files. Run Grunt Command to Watch Your Files: Now that everything is downloadedĪnd configured, we simply need to run a single command to make Grunt start.It also tells Grunt to execute the tasks anytime This configuration file setups up a number of tasks for concatenating, compilingĪnd minimizing the JS and LESS. If this file already exists, just add the entries in the You’ll need to create a package.json file with Now we need to configure the necessary packages so that all the Grunt plugins Need to exit your terminal window and reopen it again to gain access to theĬonfigure NPM’s package.json with Grunt Plugins: Ok, NPM is installed. Sudo npm install -g grunt-cli (After the installation is complete, you may Install Grunt: Because you’ll be using Grunt a lot, it’s easiest to just Install NPM (the Node.js Package Manager). Node.js, you’ll need it to access these tool. Install Node.js (with NPM): Even if your project isn’t written in Note: I know this seems like a lot of steps, but often times many of themĪre done already - especially if you’re working on a Node.js project In Grunt, however, we need to explain these procedures via a configuration file.ĭon’t worry. Watching the files and automatically recompile. Options and set the output paths, then you’d be good to go. In CodeKit, you’d drag this whole folder into your window. We also have a style.lessįile (that imports the other underscored. We have 3 JavaScript files in the /javascript directory that need to beĬombined and minified into /public/js/. Suppose we have a project using JavaScript and LESS. It’ll allow other developers (who may not have CodeKit installed) to easilyįollow the same workflow when they open your project. You’ll be able to reuse many of the same build tasks and Makes sense to leverage it for the real-time compiling and reloading of Given that Grunt has these features, once it’s integrated into a project, it Package for watching files (the same way CodeKit does) and firing off certain LESS/SASS into CSS, concatenating JavaScript, minifying, etc. Is a task runner that has a ton of packages for doing things like compiling Have been using Grunt for various building tasks. With that said, I’ve found myself doing lots of Node.js development lately and It’s served me well for years and I continue to use it on many of my projects. Let me start by saying that I’m a big fan of CodeKit.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |