Building only styles or only scripts

[brett-shwom]

How might I configure a build wherein the output is only a .js file or only a .css file?

I tried this:

components: {
  options: {
    name: 'app',
    ignore : {
      'component name' : ['scripts']
    },
  },
  src: '.',
  dest: '.tmp',
}

but a css file gets created anyway.

[darsain]

I've researched this a little bit, especially the component-build package which is used by this task to build components. It seems that ignore types set by Builder#ignore (which the ignore option is passed to) only affect dependencies, and not the currently processed component itself.

That being said, this task is using Builder#build method to build all stuff, but there are other methods:

• Builder#buildScripts
• Builder#buildStyles
• Builder#buildTemplates
• Builder#buildFiles
• Builder#buildImages
• Builder#buildFonts
• Builder#buildJson

that could be used to isolate what gets build. Maybe introduce an option like:

options: {
  build: 'all', // default, will use Builder#build and build everything
  build: 'scripts', // will use Builder#buildScripts and build only js files
  build: ['scripts', 'styles'] // you get the point :)
}

@anthonyshort what do you say? :)

[brett-shwom]

Thanks for the response! A bit more background: The problem I'm trying to solve is this. I'm trying to get livereload and componentbuild to play nice. Right now, I have a Gruntfile.js that looks like this:

   watch: {
      livereload: {
        options: {
          livereload: LIVERELOAD_PORT
        },
        files: [
          '.tmp/app.js',
          '.tmp/app.css',
          '<%= yeoman.app %>/*.html',
          '{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css',
          '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js',
          '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
        ]
      },
      component: {
        options: {
          livereload: LIVERELOAD_PORT
        },
        files: [
          'lib/**/*.{js,hbs,css,styl,html}'
        ],
        tasks: [ 'componentbuild' ]
      }
    },
    componentbuild: {
      options: {
        styles: true,
        scripts: true,
        sourceUrls: true,
        configure: function(builder) {
          builder.use(html)
          builder.use(stylus)
        }
      },
      components: {
        options: {
          name: 'app'
        },
        src: '.',
        dest: '.tmp'
      }
    },

When I run grunt watch, any changes made to stylus files end up triggering the recompilation of both app.js and app.css. Maybe there's a better way to structure my Gruntfile.js, I'm not sure. My thought was to have two different watch tasks: one which would listen for changes in .js and template files and rebuild app.js, another which would listen to changes in .styl files and rebuild app.css. As you observed, this doesn't seem to be easily doable.

Thoughts?

[anthonyshort]

Having a type option would definitely be great. Probably as @darsain suggested, using an array. If it isn't present, it will build all, otherwise it would just build the type. Another option would be to pass a command line option so you don't need to create a bunch of different tasks

grunt componentbuild --components styles,scripts

[kewah]

closed for inactivity

[ismay]

I know this was closed for inactivity, but I think this feature would still be very useful. Otherwise I'm forced to run all build steps instead of just a subset for the files that actually changed.

Are there no longer plans of getting this feature added? I would appreciate if this could be reopened.

[kewah]

I won't be able to work on this feature before mid/end next week. Feel free to make a PR :)

We can add an option to define which type of asset we want to build (scripts, styles, files) and call the associated function (buildScript, buildStyles, buildFiles. https://github.com/anthonyshort/grunt-component-build/blob/5491adcd3a16758fa26561d29c3329b959601e8c/lib/build.js#L35). If the option is not defined, we build everything.

[ismay]

Thanks for reopening. I've checked the source to see if I could contribute, but it's a little over my head and I would probably only make a mess. I did however just want to acknowledge the fact that this would still be a useful option in my opinion. (especially if it could be expanded to cover all builder2 options, not just styles, scripts and files).

[ismay]

I don't know if this'll be useful (as I'm a total noob at js, let alone node), but this is a script that I've used to compile only the components that I wanted to compile:

https://github.com/ultrafoxx/ultrafoxx/blob/6badccf773a2fa68f1877d6f1c5d159dba24c309/grunt/scripts/builder.js

It is a standalone node script however, so not sure how easy it will be to integrate it with grunt-component-build's codebase. Hope it'll be of use.

[ismay]

Also, while we're on the topic of adding functionality: I've noticed that grunt-component-build currently only supports a single entry point. Have you thought about supporting bundler.js as well? Or would that be beyond a grunt task?