I want to integrate some build tools like NPM and Grunt whilst i'm working on my Wordpress theme. Eg...I'll write some Sass to compile it down to an .css file.
Where do the build files like grunt file and node_modules folder live within the wordpress theme?
There's documents on how to do it but not many documents on how it is structured.
How do you structure build tools to work with a wordpress theme?
I usually compile my own version of css from scratch when doing a client website - using built in tools suggested by either bootstrap, bulma or uxkit. For bulma you have a nice introduction on how to compile their framework
https://bulma.io/documentation/customize/with-node-sass/
In my workflow - I don't know if that would be optimal for everyone - I put wordpress files on the same level as node_modules folder but compile straight to wordpress theme folder, so my build command is as follows:
"css-build": "node-sass --omit-source-map-url src/scss/app.scss ../wp-content/themes/labaza/app.css",
So in this case when you take your files from local machine to server you just overwrite theme folder, and need to make sure that you're not uploading any node_modules.
Hope that helps - but as I wrote it's only my idea based on how I like to work.
Related
Asked this in the internal WeltPixel forum, with no luck... so I try here:
Working on a large multisite with several websites, all based on child themes of WeltPixel Pearl
I'm making changes in multiple less files. When I'm working locally I have grunt running to generate .less / .css and .map files so I can see in the browser which less files I have to edit.
This workflow is from Magento docs, using grunt less and grunt watch to automagically generate .css whenever I saved a .less file, and it worked perfect - I thought...
But now I discover that if I generate css with :
bin/magento weltpixel:less:generate
and
bin/magento weltpixel:css:generate --store=STORECODE
AFTER i run grunt less, then I have other results, and the map files aren't generated. In the browser I only see styles-m.css and styles-l.css, so it's a mess ...
Whenever we publish for production, the last step is to run weltpixel:css:generate which is explaining why I had some incongruences between my local platform and production server.
So, I'm asking for : how do you build a development workflow that will let you modify some .less, generate .css and build corresponding .map files, so you can see in development tools in the browser which less files you should modify?
Any ideas?
/best regards
I am developing a wordpress theme. I am new to using Grunt and composer for packages.
I have also integrated git flows. At the moment I am developing on develop branch and then merge to master once I am satisfied with the code.
The problem I am facing is that my master branch has Gruntfile.js as well as package.json in it. Similarly there are sass files in css folders. I want a clean release branch, in which there are only required theme files and no gruntjs, pacakge.json and sass files.
These all files are being tracked in master, how can I create a clean release branch.
I have followed the Woocommerce repository for making my development environment.
I could not find a build process in it also. Am I missing any proper step?
P.S : I don't know if I should be sharing any code samples here, but if you want anything I can share it here.
As far as I'm aware you can't do what you're trying to do and I don't believe git is meant to work that way. Having your grunt & SASS files in the master branch is the correct way of doing this, those files are also in the Woocommerce repository you've linked to.
I'm guessing what you're trying to do is create a release of a theme that doesn't have any of the 'development only files', for lack of a better term, to give to the the end user installing the theme? If so that release would be a separate 'thing' to git as git is mainly for developer version control. What I think you're after is just creating a stand-alone downloadable zip file by the sounds of things?
For example if you were to submit your theme to WordPrss.org they take it as a zip file rather than a link to a git repository.
I'm working on a plugin for Moodle that involves a lot of compiled JavaScript. Because of the complexity of the plugin, I'm writing it in TypeScript and compiling it with Webpack. This is all working fine.
However, Moodle has built-in Grunt tasks to help with JavaScript deployment, including uglifying the code. My compiled code is already minified, so this step isn't necessary. For some reason, putting the compiled code through the uglifier creates errors in the browser that aren't present with the non-uglified version. Because of this, I'm hoping to find some way to override the Grunt task.
The Grunt task is pretty simple; it uses a glob to find all javascript files in the various plugin folders in Moodle. I don't want to modify the top-level Gruntfile so that others can use this plugin without having to touch the core Moodle files. Is there a way I can create a Gruntfile (or some other flag) inside my plugin's directory that signals the parent Gruntfile to ignore my compiled file?
Unfortunately, removing my file from the watched folder is not an option. In development mode, Moodle serves the pre-compiled "src" script, so I need to keep the file there for development purposes (otherwise, I need to manually purge the cache each time I want to load the updated file).
Here's a general overview of what's happening:
Directory structure:
public (main Moodle directory)
Gruntfile.js
local
my-plugin
amd
src
my-webpack-compiled-plugin.js
build
my-webpack-compiled-plugin.min.js
my-webpack-compiled-plugin.js is the file output by Webpack (the file I don't want to be uglified)
The Gruntfile.js contains, amongst other things, this:
amd: {
files: ['**/amd/src/**/*.js'],
tasks: ['amd']
}
The amd task is where the files get uglified.
So I'm hoping to find some way to exclude local/my-plugin/amd/src/my-webpack-compiled-plugin.js from getting to the amd task from within the /local/my-plugin directory to keep my plugin self-contained.
I'm dealing with an ASP.net project that's maintained by a couple of people via git.
We're looking to minify the CSS files at build time and have checked out the bundle and minify addon however this doesn't appear to offer an option for the minified code to be regenerated from the source files at each build.
Is there a better way for us to minify our source css files on each build?
Understanding your question right, you want to concat and minify your css sources and time you build or deploy.
I do not now how your build stack look like, so I can guess only, but using css files I would use something like grunt or gulp.
On my self I prefer gulp. It is easy to create a task which concat, minify or also auto prefix your css files.
Once your task is created you can add it to your build script, task or bash.
This way works also fine with CI like wercker or travis.
You can use Microsoft Ajax Minifier after build.
Explained here: https://www.codeproject.com/Articles/182690/Minify-Javascript-and-CSS-using-Microsoft-Ajax-Min
Or if you have integration with Jenkins then after build step you can call bat file and run minification on folder of your build directory.
For multiple technology projects, You can create exe based on Microsoft Ajax Minifier and after all builds are done, Run this exe using bat command from Jenking only to minify all the css and js files.
I have integrated this with PHP, ASP.Net and Silverlight code after build of these projects.
One better way is to make your file to online file (like CDN link github can help you in that) and next rather then adding all those css add that link which will be saving much of the build time.
Try to minify your file.
Try to make an online link file.
I am working on a rails app and I would like to include some custom css files inside my rails application. I would like to separate out the css from bootstrap and the css that I wrote. Could I just put the custom css files inside vendor/assets/bower_components folder in my own css folder?
Is there anything else that I need to do for my css files to be picked up?
There are several ways you can achieve bower functionality in a Rails application.
Although having said that, I'm not sure about your wanting to use it on your custom.css file. The file itself will work just as well if you keep it in your app/assets/stylesheets folder, which will concatenate it to the asset pipeline
Bower-Rails
You'll may wish to consider using bower-rails, which seems to just give you the ability to use bower within your Rails app. This seems to be specifically for helping you keep your dependencies up to date:
Dependency file is bower.json in Rails root dir or Bowerfile if you
use DSL. Check out changelog for the latest changes and releases.
RailsAssets
Another amazing piece of functionality we found recently is "RailsAssets"
This works really well (we use it in production), as it keeps your dependent assets completely up to date. You can use it very simply:
#Gemfile
source https://rails-assets.org
gem 'rails-assets-BOWER_PACKAGE_NAME'
#app/assets/javascripts/application.js
//= require BOWER_PACKAGE_NAME
When running bundle update, this will then give you the ability to update your assets in line with your app!