I decided to use semantic ui for my new project. I set up everything and it works. Now, I have also used gulp for minifying my css and js, so my gulp file has all related code to do so. But, every time I change anything in my css I have to run gulp command so as the changes get reflected in minified files that i have included in my html. Can it be some how configure so that every time a css file changes, the minification task runs again?
Yes, use the watch method to inspect a certain directory for changes. In this case, all the sass files are monitored for changes. When I save a file, the compile-sass task will run:
gulp.watch('./sass/**/*.scss', ['compile-sass']);
I placed the above line in my default task, but you can put to any task if you want more options in your development environment.
Related
I'm using Laravel mix in my project. I need to alter the app.css in the public folder, whenever i comment or delete styles and run npm run dev the styles come back. I need them gone. How do I permanently stop this?
The files in public generated by npm run [production|dev] are compiled versions of the application's source files. These files should be treated as immutable: they are written once during the compilation process and never to be written to again. Any changes you need to make to the output should be done in the compilation process, whether that's by modifying the source files or by adjusting the way that the compilation process works. Every time you run npm run dev it replaces the old files with the new.
You can find the source files for your application in resources/assets. If you're not sure how to make a specific change please create a new question outlining the problem you're having, e.g: "I want to remove this style from my app.scss but I don't know how".
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'm creating a theme and store from scratch, currently every single time I do a ant all in console every change I've done into the style.css of the theme is erased and goes back to standard CSS.
Any ideas how can I keep my CSS changes even if I do a ant all/ant clean all?
Thanks!
The yacceleratorstorefront extension template provides a process for building a responsive website front end that supports LESS.
Build process will generate a _ui folder that contains the appropriate JS and CSS styling. This process can be started either through Ant or Grunt.
Modify any required storefront files in the _ui-src folder and then generate the _ui folder using ant or grunt build is the recommended approach. Kindly make changes to js or less files which are available in _ui-src folder and build will generate the respective js or css changes in _ui folder.
Check this for more details.
I have a very large project with many contributors. A lot of whom don't work on the sass or front end.
Currently we have a deployment pipeline which will compile the sass and deploy it to a staging server. However I still have to compile the sass locally and commit compiled sass files into the repo otherwise the other developers won't see the changes. This creates the problem of the files constantly conflicting.
Ideally I would like to find a way to serve the sass files without having to compile sass every time. Any ideas?
Maybe in your server you can set up a sass watcher via console that detects the changes in the sass files and compiles them by itself once you upload them.
Here you can read more about it:
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#using_sass
You can simply push your sass files to your repo and whoever wants to view the changes, compile the sass on his end.
I'm using the accordion, tooltips and transition components of UI Bootstrap.
I can create a custom build with the online tool on the UI Bootstrap website, which will create a minified and non-minified JS file containing only the components I selected, without overhead.
However, I don't want to use the online tool to compile my custom version of UI Bootstrap, instead I want to compile my own version locally, preferably using the tools I already use; Bower, Grunt and NPM.
So my question: How can I create my own version of UI Bootstrap locally?
bower install angular-ui-bootstrap, and then calling Grunt build in bower_components/angular-ui-bootstrap creates a UI Bootstrap build that includes all modules, there's probably a way to do the same with only a subset of the modules, but I could not figure this out.
It can be done by using the following command
grunt build:moduleName1:moduleName2:moduleName3....:moduleNameN
For example if you require the build to contain only tabs and buttons module , then the grunt command will be like
grunt build:tabs:buttons
The generated files will be present in dist folder
For the list of module names , check all folder names in src folder
The documentation for this is sparse , but if you check the Gruntfile.js , where they register the build task , they mention about how to build modules selectively
It is not as easy as I expected (and as it should be).
Take a look at the Gruntfile.js of the project. You will see that they do quite a lot. Converting HTML and CSS to JS, concating all the scripts in such way they are loadable by others. Moreover the file is quite difficult for orientation; it even includes custom tasks.
To mimic its behaviour I suggest this: Download it via Bower as you normally do. Copy its node dependecies to your package.json dependencies. Then copy the Gruntfile.js, change he routes, and try deleting some parts of the code until you reach a point when you cannot remove more lines without breaking it. It is not a nice way, it should be however successful.
If one had a lot of time, the build script is a good candidate for a deep refactoring. Moving custom tasks to standalone files (or projects), documenting the flow, and maybe implementing standard tasks for some steps (e.g. CSS minification).