0

I am trying to accomplish the following.

I have raw assets such as JavaScript source files in folder assets/js in application root. I also have folder public where should go minified files that will be loaded in application.

What I want is when I change my js files I want to IDE create minified versions of it, and then to merge those minified files into one in public folder.

I need two file watchers but don't know how to configure them.

I tried default options for YUI Compressor and those build minified files in the same folder where source files are. But I can't manage to merge those files with File Watcher.

I also created two scopes, one for source JS files, and one for minified JS files.

I am not even sure if File Watchers can do this. I am talking about multiple folders, and recursive scopes.

I would appreciate any help.

LazyOne
  • 158,824
  • 45
  • 388
  • 391
cvetan
  • 393
  • 1
  • 3
  • 19
  • what I know is how to create minified js files when you save the original one, but to merge all the js minified files into one - first of all why would you do that? and second it's not common. Are you interested in just the js minified files? – Edwin Jul 07 '17 at 08:39
  • I want all files merged because i will load only one minified file at the end of body, and have one HTTP request. Not dozen. I know how to create minified files, that works with the default options for YUI compressor. Can i minify all files into one folder? Let's say i have dedicated min folder where all minified files go no matter in which folder the source files are. – cvetan Jul 07 '17 at 08:53

3 Answers3

1

File watcher itself can't do anything, as it is nothing more then a way to set up some tool with CLI as a listener to file changes. So, you need to find a tool that would combine your minified files into a single file, and set it up as a watcher, external tool, etc. You can find plenty of such files on the web - see Combine multiple JavaScript files into one JS file, for example.

But, rather than using 2 separate tools set up as watchers, etc., I'd suggest using Grunt, Gulp, webpack,... You can try using grunt-contrib-uglify, for example:

module.exports = function (grunt) {
grunt.initConfig({

    ngmin: {
           concat:{
            src: ['assets/js/*.js'],
            dest: 'public/out.min.js'
    }}
});
grunt.loadNpmTasks('grunt-ngmin');

grunt.registerTask('default', ['ngmin' ])

You can run the task using Grunt console, or configure it as a file watcher

lena
  • 90,154
  • 11
  • 145
  • 150
0

What I would do is let the YUI compressor create on save the .min.js files and then use as an external tool (Settings->Tools->External Tools) this tool compressJS for linux OS (if you have windows you could try to adapt the script or run this in a linux env like a docker,vm etc - eventually use Remote SSH external Tool from settings).

In the end you can set a keymap for the tool to run it whenever you want. You can set it also as a file watcher, but this will be too much processing imho.

Edwin
  • 2,146
  • 20
  • 26
  • Can i set this up to goes throught all folders in js source folder recursively? Let's say i have folders for some parts of application? Administrators JS, products js, etc? Also can please clarify terminology here, i don't get it quite right in creating file watcher? What is working directory and what is output path to refresh? Is working directory where the result of file watcher will be - the min file for example? I tried several options, and didn't accomplish what i want and i think i don't exactly understand what is what. – cvetan Jul 07 '17 at 09:26
  • I think all of them are clear what they are: working directory is the directory where you are while saving the js file. Output path to refresh is where the `.min.js` file is (what to refresh). You said that you already accomplish the minifing of the js file so I didn't include that part. – Edwin Jul 07 '17 at 09:36
  • Yes i did. Just i am thinking to save all minified files in one folder, and then would be easier to create merged file. I would just point to that folder gather all files from there and create one file. But i can't manage to move resulting file to some arbitrary folder. I would like file watcher like this probably: Watch for all JS files in assets/js folder recursively, Build min files in assets/js/min folder. Other: Wathch for all files in assets/js/min folder. Merge files into one and save it in public/js folder. Can i do this? – cvetan Jul 07 '17 at 09:43
  • you know this discussion goes beyond your question. You could create a Path Variable (Settings->Appearance & Behavior) and then use that as output to your watcher settings – Edwin Jul 07 '17 at 09:56
0

OK i've set up gulp tasks to minify and concat files. Then i created custom file watcher with the gulp task for my JS files. Now everything works as i intented to, without having to manually run anything. Thank you all. :)

cvetan
  • 393
  • 1
  • 3
  • 19