• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

romanschejbal/gassetic: Assetic replacement based on the gulp build tool

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

romanschejbal/gassetic

开源软件地址(OpenSource Url):

https://github.com/romanschejbal/gassetic

开源编程语言(OpenSource Language):

JavaScript 100.0%

开源软件介绍(OpenSource Introduction):

Gassetic build status

Summary

Gassetic is an Assetic replacement which is based on the gulp build tool for more comfortable frontend development and dependency management

Advantages over assetic

  • Easy to setup
  • Use a package manager like Bower or Npm for JS dependencies
  • Use the gulp.js ecosystem to build your frontend assets
  • Use gulp-livereload for CSS hot reloading (see the CSS section in the example below)

How it works

Gassetic makes it easy to manage your frontend assets. You can install JS and CSS libs through a package manager like Bower and then compile them using tools from gulp.js

Gassetic replaces "<!-- {env}:{filename} --><!-- endbuild -->" strings in your templates with your generated CSS and JS files. In your gassetic.yml file you can specify which files and tasks to run on the input files and the names of the output files.

Gulp has literally hundreds of plugins that you can include in your gulpfile and process on your frontend assets.

Installation

  1. Create your gassetic config

yaml example with gassetic.yml

requires:
  less: gulp-less
  minify: gulp-minify-css
  concat: gulp-concat
  uglify: gulp-uglify
  livereload: gulp-livereload
mimetypes:
  # This section contains the formatters for the css files
  css:
    # In 'prod' mode, use these settings
    prod:
      outputFolder: web/compiled/css  # The output folder for your saving your compiled files
      webPath:      /compiled/css     # The web path for the compiled files
      # Run these tasks on your compiled files
      tasks:
        - { name: less }
        - { name: minify }
        - { name: concat, args: '%filename%' }
        - { name: livereload, args: { start: true } }
      htmlTag: '<link rel="stylesheet" type="text/css" href="{{ asset("%path%") }}">' # custom html tag

    # This is the list of source files to apply the above settings
    files:
      frontend.css: # This is the output filename
        - assets/css/animate.min.css
        - assets/css/swipebox.css
        - assets/vendor/bootstrap-daterangepicker/daterangepicker-bs3.css
        - assets/vendor/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.css
        - assets/vendor/jquery-simplecolorpicker/jquery.simplecolorpicker.css
        - vendors/oh/emoji-bundle/Oh/EmojiBundle/vendor/emoji.css
      backend.css:
        - assets/vendor/bootstrap-daterangepicker/daterangepicker-bs3.css
        - assets/css/backend.css

    # Watch these files for changes (optional)
    watch:
      - assets/**/*.less
      - assets/**/*.css

  # This section contains the formatters for your JS files
  js:
    prod:
      outputFolder: web/compiled/js  # Save the files here
      webPath:      /compiled/js     # Specify the web path
      tasks:
        - { name: concat, args: '%filename%' }
        - { name: uglify, args: { mangle: false } }

    # Here is a list of files to apply the above tasks to
    files:
      jquery.js: # This is the output filename
        - assets/vendor/jquery/jquery.js
      app.js:
        - web/html5lightbox/html5lightbox.js
        - assets/vendor/angular/angular.js
        - assets/vendor/angular-route/angular-route.js
        - assets/vendor/angular-sanitize/angular-sanitize.js
        - assets/js/tmp/angularApp.js/**/*.js

# This is the list of files/paths to search and find the replacement tags to insert the
# generated <script> or stylesheet tags
replacementPaths:
  - web/*.html
  - includes/**/*.html

default:
  - js
  - css
  1. Within root of your project run:
  npm install gulp-less
  npm install gulp-minify-css
  npm install gulp-uglify
  npm install gulp-concat
  ... anything else that you need and have defined in the 'requires' section of the config
  1. Update your templates from
  <link rel="stylesheet" ...

To:

  <!-- prod:frontend.css --><!-- endbuild -->

The strings <!-- {environment}:{filename} --><!-- endbuild --> will be searched for in the 'replacementPaths' list in the settings and replaced with the generated tags and files

  1. install gassetic npm install -g gassetic

  2. run gassetic for watching and livereloading the files

  3. run gassetic build --env=prod for production build

  4. run gassetic build --env=custom for custom build

Done.

More docs

Contributions

Launch tests

npm install
npm test

The MIT License (MIT)

Copyright (c) 2014 Roman Schejbal

Donate: 1K4HAJqnh8PPomJj47vWNP3GPNF2LE2FEt




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap