![]() ![]() Gulp. Upload source maps to server, source maps are used to see css rules corresponding scss files with line numbers Return gulp.src(themeFolder + 'css/**/*.css') We use gulp-cached to upload only changed files. SftpRemotePath = '/home//themes/my-theme/css', This is the gulpfile we currently use at Incubalia: // Required modules var gulp = require('gulp'), livereload reloads my browser to see changesĪll of these with the appropiate gulpfile.js will be done by gulp without our intervention.To use our Prestashop specific gulpjs.file we need install several gulp plugins before, run “ npm install node-notifier gulp-sftp gulp-livereload gulp-exec gulp-cached run-sequence” that will install all dependencies: Our specific “gulpfile.js” for Prestashop Gulp dependencies for our Prestashop setup You have lots of recipes in gulpjs github. This is better, now we need to create this file: “gulpfile.js”, where we must write gulp configuration using javascript. Oh! before we need to install gulp locally in this project, run “ npm install gulp” and re-run “ gulp“: To install gulp you first need to instal “Node Package Manager”: nodejsĪfter installing Node Package Manager, now install gulp itself following gulp getting started doc: Īnd it’s done! you now have gulp on your system, now go to any of your prestashop projects folder (command line) and run “gulp”: I normally use a gulp module for Sass compilation, but in this case I call “compass watch” to avoid recompile and upload all. css to server just after compiled and auto reload my browser. ![]() With gulp you can automate compilation to run each time you save a. ![]() If you are using Sass import statements, youll. For an example, take a look at this example site using Sass support in Jekyll. css before uploading to server, there are several programs that do this for Windows, Mac and Linux ( Koala, Prepros, Scout, Hammer, Compass.app…) but I prefer to automate the process using Gulp (more on gulp: Gulp compiles, minifies and much more). Place all your partials in your sassdir, which defaults toThis means you cannot upload the files directly, you must compile. You can see it uses many things that regular CSS doesn’t have like variables or indenting levels. Sass files in Prestashop are written using “scss” syntax that is very similar to regular CSS but with a lot more features, this is an example from Prestashop 1.6: "warehousefont" SourceMap files allow you to find the original position. Enable the SourceMap option to create a sourcemap (.map) file along with the output CSS file. You can also use project wide output options to adjust output path for all Less files. From version 1.6 the Prestashop default theme is developed using Sass, this means that the CSS of the theme is not written directly, is obtained after compiling the Sass files. Click the output path on the file options sidebar to manually change the output path of a file.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |