How to handle development and production assets with gulp?

replied 10 years ago

This is how I do it

config = 
    production: true
   
#Task definitions here

gulp.task 'set-development', -> config.production = false

gulp.task 'watch', ->
    gulp.watch 'src/coffee/**/*.coffee', ['set-development', 'coffee']
    gulp.watch 'src/less/**/*.less', ['set-development', 'less']
    gulp.watch 'src/bootstrap/**/*', ['dev']

gulp.task 'dev', ['set-development', 'default']

gulp.task 'default', ['less', 'bootstrap-js', 'coffee']

So I only use grunt watch or grunt dev in development but calling grunt by itself will build production

Then in the task itself I'll refer to config.produciton


gulp.task 'coffee', ->
    gulp.src 'src/coffee/app.coffee', read: false
        .pipe browserify(
            transform: ['coffeeify'] 
            extensions: ['.coffee']
            debug: not config.production
        )
        .pipe rename('app.js')
        .pipe gulp.dest('./assets/js')
        .pipe notify(message: 'app.coffee -> app.js: Complete')

Last updated 2 years ago.

0

mabasic

replied 10 years ago

And how do you include those files in your layout?

Is it better to include all assets in the layout or only the ones you really need for that view?

Last updated 2 years ago.

0

luknei

replied 10 years ago

I would like to know that too mabasic. But I guess if you cache all your assets, there is no real difference?

I also have one related question, maybe someone knows what response header I am missing. There is headers of my css files.

Accept-Ranges:bytes
Cache-Control:max-age=2592000, public
Connection:Keep-Alive, close
Content-Encoding:gzip
Content-Type:text/css
Date:Fri, 04 Apr 2014 16:54:39 GMT
Expires:Sat, 04 Apr 2015 16:54:39 GMT
Last-Modified:Mon, 03 Mar 2014 23:23:37 GMT
Pragma:Cache
Server:Apache
Transfer-Encoding:chunked
Vary:Accept-Encoding,User-Agent

And still my css files are not being loaded from browser cache, but browser makes request to the server and gets response with status 304 - Not Modified...

Last updated 2 years ago.

0

damienadermann

replied 10 years ago

mabasic said:

And how do you include those files in your layout?

Is it better to include all assets in the layout or only the ones you really need for that view?

//views/layouts/master.blade.php
@section('styles')
  {{ HTML::style('css/app.css') }}
@show

@section('scripts')
  {{ HTML::script('js/app.js') }}
@show

if you need to add more specific stylesheets or scripts, like the example of a page specific widget just extend the section in your view

//views/page_with_widget/index.blade.php
@section('scripts')
  @ parent
  {{ HTML::script('js/heavy_widget.js') }}
@stop

Theres always the issue of cache busting with bundled assets like these. The simplest solution would be to put the files md5 in a config. I'm sure theres an elegant way to automate it but simplest solution would be to md5sum filename and copy it into a config and add that to your view.

//views/layouts/master.blade.php
@section('styles')
  {{ HTML::style("css/app.css?v=" . Config::get('assets.style_app_md5') ) }}
@show

@section('scripts')
  {{ HTML::script("js/app.js?v=" . Config::get('assets.script_app_md5')) }}
@show

Last updated 2 years ago.

0

that0n3guy

replied 10 years ago

Here is my gulp file: https://github.com/that0n3guy/gulpfile-laravel

Here is one way to add them:

<head>

    <title>
        @yield('title')
    </title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @yield('metatags')
    {{ HTML::style('build/bootstrap/stylesheets/bootstrap.css') }}
    {{ HTML::style('build/css/app.css') }}

    @yield('css')
    @yield('head')

    {{ HTML::script('build/js/appheader.js') }}

</head>

and footer:

{{ HTML::script('build/bootstrap/javascripts/bootstrap.js') }}
{{ HTML::script('build/js/appfooter.js') }}

Last updated 2 years ago.

0

Moderators