In my project, for example, I have this structure:
/public/js/src/ /* many jquery plugins there */
/public/css/src/ /* many css files there, that describe different things */
After changes have been made, I would like to type in command line something like:
root#hostname:/var/www/test/public# ./build
which would generate two files:
/public/css/build.css - all files from /public/css/src/ folder with minified source
/public/js/build.js - all files from /public/js/src folder with minified source
For the moment I am using less css, which is working on node. I would like to have one script that will do everything, for css as for javascript. Could you please advise the best way to "build" dev-source javascript & css files?
You can use YUI Compressor. I'm sure it's also available for Linux.
It works from the command line. Read here how it works.
Example:
java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js --charset utf-8
I'm sure you can setup a simple Bash script that executes two commands, one for CSS and one for JS by using parameters as input.
YUI-Compressor is available as a package in any Ubuntu version.
apt-get install yui-compressor
Hope it helps
You can use Apache ANT and YUI Compressor to set up your own build process. You can minify all your JS and CSS files with a single command.
EDIT: if you want a sample project try H5bp's ant build scripts http://html5boilerplate.com/
I know this is an old question, but for those getting here through Google. You can easily use Compass for this.
compass compile --output-style compressed --force
More info: http://compass-style.org/help/tutorials/production-css/
Use ACCSS for css compression, its compression rate is better than YUI-Compressors and its written in c with automake installation, so it is portable to almost every system.
Like above, you can use a shell script to combine less and accss. accss support reading from stdin, so you can combine them with
lessc styles.less | accss > out.css
It also has severeal compatibility options, especially for Internet Explorer.
https://github.com/acwtools/accss
Related
I need your help with website project I'm working on. My project consits of 7 html documents, 3 stylesheets, 8 .js (including jquery.min.js and some jquery plugins) and some pictures. I want to bundle and minify it as much as it is possible (it would be good to get only 1 css and 1 js file or maybe 1 js, which contains styles inside).
For clarity - now, when I have all dependencies in html - everything is working properly. But I'm not sure how to set all module.exports and requires. Could you tell me how to do it step-by-step in a proper way?
Many thanks in advance.
PS. I write in ES5, so I don't use Babel.
You can do the following to make your codebase a bit more tidy.
Manually group the content of your relevant js files into one and export it as a nodejs module by using module.exports = module_name on the top of your merged js script (Repeat as needed for any jscripts in your project).
Then include the exported module in your main node file and include its main functionality using var modulesfile = require(./module_name); Please note directory paths while importing your js modules.
You can also run a minifier like minifyjs to make your js files size even smaller if they need to be called multiple times from a url. Nodejs installation and usage for minifyjs can be found here.
You can also call other css from within existing ones by using the
#import url("./css/filename.css"); Just verify proper css directory paths first.
In case you also want to use browserify for node there is a full guide in the npm website.
Another good and simple solution is to move all of your codebase in a visual studio web project. From there you can do pretty much what you want, organize your scripts and css files (/Scripts and /Content directories) in bundled configuration files etc.
NOTE: All your code has to be migrated to an asp .NET project to use this approach (as per Microsoft doc) properly.
I developed a javascript web app with npm and webpack. Now I converted all those .js files to .ts by using the powershell command stated here. The succeeding actions in the link is using grunt; I want to directly use VS2015 Typescript project but I cannot find any reference on the net about what to do with the node_modules and how I can fully convert all my package.json and webpack into Typescript project. The Task Runner Explorer in VS2015 only supports Grunt and Gulp tasks.
I recommend going with the "bare-foot" solution first. I'd rely much less on VS2015. It's maybe the best IDE available, but JS and TS projects can be handled from command line without relying on the magic of the IDE. This way you can gain a deeper understanding of these technologies and I think now it would be easier too.
I recommend the following steps:
create a tsconfig.json in the root folder. Read around, there's plenty of info available. Just one hint: use 'filesGlob' to specify the files to compile.
use TSD to get the .d.ts files of the libs you use from DefinitelyTyped. You might create, or at least just declare, the missing packages.
run 'tsc --project .' from command line to compile everything. You'll see the errors that are to be solved.
I'm typing from mobile, I can edit the codes tomorrow. Have any comments?
What tools can minify JS/CSS files after saving files without using console? I want something like SimpLESS. Write and update some js and css files and they minify and concatenate in two "build" files like that daemon program do automatically with LESS.
For Windows: Smalify works for me, if I'm not using CoffeeScript. I haven't tried them, but there are several other CodeKit alternatives here.
You can always find a plugin for your Text Editor. I don't know which editor you are using, but most of the popular ones either have build systems, have strong plugin communities, or both.
Sublime Text 2: Tons of plugins, and you can customize a build and save script.
Notepad++: Vibrant community, has minification plugins that would work for you as well.
CodeKit for Mac.
Check this python script.
http://github.com/hkasera/minify
It minifies js as well as css files too. It stores detailed log files and you can add this script as a git hook and save yourself from doing it manually everytime.
Hope it may help!
Is there anyway to easily compile CoffeeScript on save? I'm using TextMate or Sublime Text 2.
Coffeescript has a 'watch' feature. You could set up, as a semi-permanent process:
coffee –wc -o media/js/ src/coffee/*.coffee
And for every file with an extension ".coffee", the corresponding compiled ".js" file will be put into the target directory every time you save.
That said, I use a makefile and a fabfile, because my HTML is HAML, my CSS is LessCSS, and my development directory is not my test path, so I needed something smart enough to "build and deploy."
If your machine supports inotify, you could use inotifywait to watch your entire work path, and call Make as needed. But at that point, you're into hard-core geekery.
You can also accomplish this without the command line:
Add a build process to Sublime Text.
Make sure that Save All on Build is selected in the Tools menu.
Use ⌘B instead of ⌘S when saving.
So instead of compiling on save, you're saving on compile.
The most straightforward solution with Sublime, is to install the Sublime package called Better Coffeescript (preferences --> package control --> install package...), and then make sure that its configuration includes "compileOnSave": true (preferences --> package settings --> Better Coffeescript...). Then restart Sublime.
For Sublime, anything else is not enough or too much extra components. Just came here after upgrading to Sublime 3, and it works like charm for Sublime 3 (as it did for Sublime 2, I just forgot about it at first).
Well coffee --watch has 2 major flaws:
New files created after command has been issued aren't being watched
Requires manual initiation so there can be a chance you forget to do it, which doesn't sound more brilliant than forget to compile before you git commit it
The solution I came up with is a rather simple Bash script that takes coffee --watch a few steps further which will allow your working directory tree to be watched ever since system login, and automatically get compiled into JavaScript on each file save/change
or new file creation:
http://blog.gantrithor.com/post/11609373640/carefree-coffeescript-auto-compiler
There may be more elegant way to do this, but this implementation works great =)
If you also want bundling, buildr offers watching and bundling too: https://github.com/balupton/buildr.npm
The (Java|Coffee)Script and (CSS|Less) (Builder|Bundler|Packer|Minifier|Merger|Checker)
gem install stasis
stasis -d
The best solution I have found compared with all other static compilation tools like StaticMatic, Middleman, etc.
Very flexible and configurable and does not rely on any preset folder structure. Just add controller.rb and write some Ruby. Lots of helpers for doing clever things before/after compilation.
https://github.com/winton/stasis
I like codekit :) Simple and effective way to compile coffeescript, sass, less, haml, and more, with lots of niceties. http://incident57.com/codekit/
I am running jsmin to compress all the javascript files of my ASP.Net web application as a postbuild event in the csproj file like this:
"JsMin.exe"
"$(ProjectDir)script"
"$(ProjectDir)script\minified.js"
This was working fine when I kept all js files in the root of the script folder. But as it was starting to become alot of files in this folder, I decided to divide the files into subfolders. Now it seems that jsmin only fetches the js files in the root folder, and I cannot see that it has any option to include files in sub-folders. Does anyone have a good solution for a situation like this? Would seem to me that it should be a pretty common thing to do, so that is why I was a bit surprised it was not a parameter to jsmin.exe enabling sub-folders.
You should be able to use DOS' for command to do that:
for /R "$(ProjectDir)scripts/debug" %s in (*.js) do JsMin.exe %s > "$(ProjectDir)scripts/release/%~ns.min.js"
That assumes the scripts are in (or in directories within) a directory named ~/scripts/debug and minifies them to ~/scripts/release with the .js replaced by .min.js.
I've tested that in CMD, but not as a build event in VS. So, you may need to tweak the syntax slightly.
A little late to the party, but below is the code to make Dave Ward's suggestion of recursively minifying javascript files.
Here is the code ported to work using a Visual Studio build event:
for /r "$(ProjectDir)scripts" %%s in (*.js) do $(SolutionDir)tools\jsmin.exe < %%s > "$(ProjectDir)debug\%%~ns.min.js"
type "$(ProjectDir)debug\*.min.js" | "$(SolutionDir)tools\jsmin.exe" > "$(ProjectDir)release\local.min.js"
del "$(ProjectDir)debug\*.min.js"
The above code recurses the scripts folder (the root and sub-directories) for all scripts and places them in a debug folder (this can be any other folder in your directory as long as you have read/write perms set on it and it's not apart of the directory structure you are recursing. It then minifyies all the *.min.js in the debug directory and cleans them up afterwards. I scoured the net trying to find this solution and couldn't so I hope this helps someone in need :)