Simple assets manager middleware for express. Includes gulp integration for concatenation and minification task.
$ npm install git+https://github.com/sreucherand/simple-assets-manager.git- In development environment, each resources are loaded separately.
- In production environment, the concatenated version is loaded.
Definition
assets.json
{
"css/main.min.css": {
"srcPath": "app/",
"files": ["scss/css/main.css"]
},
"js/scripts.min.js": {
"srcPath": "app/",
"files": [
"js/main.js",
"js/classes/image.js"
]
}
}Express
Use express method.
@param assets - assets definition file content
- app.js
app.use(require('simple-assets-manager').express(require('./assets.json')));
app.use(express.static(path.join(__dirname, './app')));
app.use(express.static(path.join(__dirname, './public')));- index.view.html, with swig
<html>
<head>
{{ assets('css/main.min.css') }}
</head>
<body>
{{ assets('js/scripts.min.js') }}
</body>
</html>It will render,
- for development :
<html>
<head>
<link rel="stylesheet" href="scss/css/main.css">
</head>
<body>
<script src="js/main.js"></script>
<script src="js/classes/image.js"></script>
</body>
</html>- for production :
<html>
<head>
<link rel="stylesheet" href="css/main.min.css">
</head>
<body>
<script src="js/scripts.min.js"></script>
</body>
</html>Gulp
gulpfile.js
Use gulp method. You need to specify the destination directory as option path. The example uses gulp-if, gulp-uglify and gulp-minify-css for minification.
var gulpif = require('gulp-if');
var uglify = require('gulp-uglify');
var minify = require('gulp-minify-css');
var assets = require('simple-assets-manager');
gulp.task('compile', ['sass'], function () {
gulp.src('./assets.json')
.pipe(assets.gulp({
path: './public'
}))
.pipe(gulpif('*.js', uglify()))
.pipe(gulpif('*.css', minify()))
.pipe(gulp.dest('./public'));
});It will generate the following files :
public
|
├── css
│ └── main.min.css
└── js
└── scripts.min.js