Grunt usemin,获取压缩文件的最终路径以允许预加载
Grunt usemin, get final path of compressed files to allow preload
我有一个像这样的 HTML 块用于缩小 css 和 js 文件:
<!-- build:css static/assets/css/combined.css -->
<link rel="stylesheet" href="static/bower_components/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="static/bower_components/photoswipe/dist/photoswipe.css" />
<link rel="stylesheet" href="static/bower_components/photoswipe/dist/default-skin/default-skin.css" />
<link rel="stylesheet" href="static/assets/css/jasny-bootstrap.min.css">
<link rel="stylesheet" href="static/assets/css/main.min.css">
<link rel="stylesheet" href="static/assets/css/custom.css">
<link rel="stylesheet" href="static/common/da-angular-spinkit/angular-spinkit.min.css">
<!-- endbuild -->
我需要预加载资源 static/assets/css/combined.css
但最终文件的名称末尾有一个散列,所以最终路径类似于 static/assets/css/combined.min-af5890ce41.css
,所以我没有知道如何包含以下标签:
<link rel="preload" href="static/assets/css/combined.min-af5890ce41.css"/>
-------------------------------------------^^^^^^^^^^^^^^^^^^^^^^^^^^^
因为我不知道生成的缩小文件的最终名称是什么。
我怎样才能得到这个生成文件的输出?我只需要最终路径名。我搜索 grunt-usemin
但似乎是 "minimalist".
谢谢。
编辑
我在项目中发现了一些 grunt 代码,如果你能看到哪个模块正在对文件哈希进行操作:
/client/static/bower_components/bootstrap/Gruntfile.js
:
这里我可以看到:
- jshint
- 丑化
- 少
- csslint
- css分钟
- css梳子
- htmlmin
我看不到这些模块对 index.html 中的 build:js
或 build:css
有什么作用。
/client/static/bower_components/photoswipe/Gruntfile.js
:
在这里我可以看到 npm 任务:
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-jekyll');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-aws-s3');
grunt.loadNpmTasks('grunt-svgmin');
编辑 2
在文件夹 /dev/
上有一个 gruntfile.js 与此代码(似乎无关):
var src = "../src/client/";
module.exports = function (grunt) {
grunt.loadNpmTasks("grunt-angular-gettext");
// We extract translations with 'grunt nggettext_extract'. Those files go to '/dev/translations-extract' directory.
grunt.initConfig({
nggettext_extract: {
pot: {
files: {
'translations-extract/template.pot': [src + 'static/common/**/*.html', src + 'static/states/**/*.html', src + 'index.html', src + 'indexMobile.html']
}
},
},
// We compile those files (*.po) with 'grunt nggettext_compile. The translations.js file goes to /client/static/util/translations/ dir.
nggettext_compile: {
all: {
options: {
module: 'alvarez',
},
files: {
'../src/client/static/common/translations/translations.js': ['translations-extract/*.po']
}
},
},
})
}
然后,在 /dev/bower_components/
上有大量插件,每个插件都包含 gruntfile.js。
编辑 3
在 /ops/
上找到 gulpfile.js 并且似乎相关
/**
* Crea una versión de distribución concatenada y minificada
*/
var gulp = require('gulp');
var run = require('gulp-run');
var gulpif = require('gulp-if');
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var debug = require('gulp-debug');
var del = require('del');
var ngAnnotate = require('gulp-ng-annotate');
var minifyHTML = require('gulp-minify-html');
var cleanCSS = require('gulp-clean-css');
var rev = require('gulp-rev');
var revReplace = require('gulp-rev-replace');
var embedTemplates = require('./embed-templates/index.js');
var dist = './dist/';
var indexDist = dist + 'client/';
var HTMLDist = indexDist + 'static/';
var src = '../src/';
var assetsSrc = src + 'client/static/assets/'
var cssSrc = assetsSrc + 'css/';
var serverDist = dist + 'server/';
var libDist = dist + 'lib/';
// pm2
// Init-dist
gulp.task('pm2', function () {
run('pm2 start ' + serverDist + 'alvarez.js').exec();
});
// Init-stop
gulp.task('pm2-stop', function () {
run('pm2 stop ' + serverDist + 'alvarez.js').exec();
});
//Init-restart
gulp.task('pm2-restart', function () {
run('pm2 restart ' + serverDist + 'alvarez.js').exec();
});
// npm-install on dist
gulp.task('npm-install-dist', function () {
run('npm install --production --prefix ' + serverDist).exec();
})
// Dist subtasks
// Cleaning dist
gulp.task('del-dist', function () {
del(dist, {
force: true
}, console.log('Files deleted'));
});
// Moving index.js
gulp.task('move-server-js', function () {
return gulp.src([src + 'server/alvarez.js', src + 'server/package.json'])
.pipe(gulp.dest(serverDist));
});
gulp.task('move-config-js', function () {
return gulp.src([src + 'server/lib/**/*.js'])
.pipe(gulp.dest(serverDist + 'lib/'))
})
//gulp.task('move-lib-js', function () {
// return gulp.src(src + 'lib/config.js')
// .pipe(gulp.dest(libDist));
//});
//
//gulp.task('move-boot-pro', function () {
// return gulp.src(src + 'lib/boot.pro.js')
// .pipe(rename('boot.js'))
// .pipe(gulp.dest(libDist));
//})
// Moving html
gulp.task('move-html', function () {
var opts = {
empty: true
};
return gulp.src([src + 'client/static/**/**/*.html', src + 'client/static/**/**/*.swf'])
.pipe(minifyHTML(opts))
.pipe(gulp.dest(HTMLDist));
});
gulp.task('minify-css', ['move-assets', 'move-html-index', 'move-html-index-mobile'], function() {
return gulp.src(HTMLDist + 'assets/css/*.css')
.pipe(cleanCSS())
.pipe(gulp.dest(HTMLDist + 'assets/css/'));
})
gulp.task('move-assets', function () {
return gulp.src(src + '/client/static/assets/**/*.*')
.pipe(gulp.dest(HTMLDist + 'assets/'));
});
// Moving html index
gulp.task('move-html-index', function () {
var assets = useref.assets();
//.pipe(gulpif('**\/da-*.js', embedTemplates()))
return gulp.src(src + 'client/index.html')
.pipe(assets)
.pipe(gulpif('*.js', embedTemplates()))
.pipe(gulpif('.*\.js', ngAnnotate()))
.pipe(gulpif('.*\.js', uglify()))
.pipe(rev())
.pipe(assets.restore())
.pipe(useref())
.pipe(revReplace())
.pipe(debug())
.pipe(gulp.dest(indexDist));
});
gulp.task('move-html-index-mobile', function () {
var assets = useref.assets();
return gulp.src(src + 'client/indexMobile.html')
.pipe(assets)
.pipe(gulpif('*.js', embedTemplates()))
.pipe(gulpif('.*\.js', ngAnnotate()))
.pipe(gulpif('.*\.js', uglify()))
.pipe(assets.restore())
.pipe(useref())
.pipe(gulp.dest(indexDist));
})
gulp.task('embed-templates', [], function () {
return gulp.src([src + 'client/static/states/**/da*/*.js', src + 'client/static/common/**/da*/*.js'])
.pipe(gulpif('*.js', embedTemplates()))
.pipe(ngAnnotate())
.pipe(uglify())
.pipe(gulp.dest(indexDist))
});
// Build dist task
gulp.task('build-dist', ['move-html', 'move-server-js', 'move-config-js', 'minify-css'], function () {
console.log('Dist ready...');
});
grunt-usemin
中的答案是否定的,但在其中一个依赖项中:grunt-filerev
。最后一个模块是用于创建您的文件修订版 css
、js
和其他文件的模块。
在执行 grunt-filerev
之后(作为 grunt-usemin
的子任务执行),它会创建一个摘要(存储在您的 grunt 任务中,在 grunt.filerev.summary
下)。摘要包含以下信息:
{
“original.js” : “destination.59bcc35a.js”
}
所以您可以稍后在您选择的字符串替换 method/module 中使用它。
您可以找到有关 grunt-filerev
here 的更多信息。
希望对您有所帮助。
我有一个像这样的 HTML 块用于缩小 css 和 js 文件:
<!-- build:css static/assets/css/combined.css -->
<link rel="stylesheet" href="static/bower_components/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="static/bower_components/photoswipe/dist/photoswipe.css" />
<link rel="stylesheet" href="static/bower_components/photoswipe/dist/default-skin/default-skin.css" />
<link rel="stylesheet" href="static/assets/css/jasny-bootstrap.min.css">
<link rel="stylesheet" href="static/assets/css/main.min.css">
<link rel="stylesheet" href="static/assets/css/custom.css">
<link rel="stylesheet" href="static/common/da-angular-spinkit/angular-spinkit.min.css">
<!-- endbuild -->
我需要预加载资源 static/assets/css/combined.css
但最终文件的名称末尾有一个散列,所以最终路径类似于 static/assets/css/combined.min-af5890ce41.css
,所以我没有知道如何包含以下标签:
<link rel="preload" href="static/assets/css/combined.min-af5890ce41.css"/>
-------------------------------------------^^^^^^^^^^^^^^^^^^^^^^^^^^^
因为我不知道生成的缩小文件的最终名称是什么。
我怎样才能得到这个生成文件的输出?我只需要最终路径名。我搜索 grunt-usemin
但似乎是 "minimalist".
谢谢。
编辑
我在项目中发现了一些 grunt 代码,如果你能看到哪个模块正在对文件哈希进行操作:
/client/static/bower_components/bootstrap/Gruntfile.js
:
这里我可以看到:
- jshint
- 丑化
- 少
- csslint
- css分钟
- css梳子
- htmlmin
我看不到这些模块对 index.html 中的 build:js
或 build:css
有什么作用。
/client/static/bower_components/photoswipe/Gruntfile.js
:
在这里我可以看到 npm 任务:
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-jekyll');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-aws-s3');
grunt.loadNpmTasks('grunt-svgmin');
编辑 2
在文件夹 /dev/
上有一个 gruntfile.js 与此代码(似乎无关):
var src = "../src/client/";
module.exports = function (grunt) {
grunt.loadNpmTasks("grunt-angular-gettext");
// We extract translations with 'grunt nggettext_extract'. Those files go to '/dev/translations-extract' directory.
grunt.initConfig({
nggettext_extract: {
pot: {
files: {
'translations-extract/template.pot': [src + 'static/common/**/*.html', src + 'static/states/**/*.html', src + 'index.html', src + 'indexMobile.html']
}
},
},
// We compile those files (*.po) with 'grunt nggettext_compile. The translations.js file goes to /client/static/util/translations/ dir.
nggettext_compile: {
all: {
options: {
module: 'alvarez',
},
files: {
'../src/client/static/common/translations/translations.js': ['translations-extract/*.po']
}
},
},
})
}
然后,在 /dev/bower_components/
上有大量插件,每个插件都包含 gruntfile.js。
编辑 3
在 /ops/
上找到 gulpfile.js 并且似乎相关
/**
* Crea una versión de distribución concatenada y minificada
*/
var gulp = require('gulp');
var run = require('gulp-run');
var gulpif = require('gulp-if');
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var debug = require('gulp-debug');
var del = require('del');
var ngAnnotate = require('gulp-ng-annotate');
var minifyHTML = require('gulp-minify-html');
var cleanCSS = require('gulp-clean-css');
var rev = require('gulp-rev');
var revReplace = require('gulp-rev-replace');
var embedTemplates = require('./embed-templates/index.js');
var dist = './dist/';
var indexDist = dist + 'client/';
var HTMLDist = indexDist + 'static/';
var src = '../src/';
var assetsSrc = src + 'client/static/assets/'
var cssSrc = assetsSrc + 'css/';
var serverDist = dist + 'server/';
var libDist = dist + 'lib/';
// pm2
// Init-dist
gulp.task('pm2', function () {
run('pm2 start ' + serverDist + 'alvarez.js').exec();
});
// Init-stop
gulp.task('pm2-stop', function () {
run('pm2 stop ' + serverDist + 'alvarez.js').exec();
});
//Init-restart
gulp.task('pm2-restart', function () {
run('pm2 restart ' + serverDist + 'alvarez.js').exec();
});
// npm-install on dist
gulp.task('npm-install-dist', function () {
run('npm install --production --prefix ' + serverDist).exec();
})
// Dist subtasks
// Cleaning dist
gulp.task('del-dist', function () {
del(dist, {
force: true
}, console.log('Files deleted'));
});
// Moving index.js
gulp.task('move-server-js', function () {
return gulp.src([src + 'server/alvarez.js', src + 'server/package.json'])
.pipe(gulp.dest(serverDist));
});
gulp.task('move-config-js', function () {
return gulp.src([src + 'server/lib/**/*.js'])
.pipe(gulp.dest(serverDist + 'lib/'))
})
//gulp.task('move-lib-js', function () {
// return gulp.src(src + 'lib/config.js')
// .pipe(gulp.dest(libDist));
//});
//
//gulp.task('move-boot-pro', function () {
// return gulp.src(src + 'lib/boot.pro.js')
// .pipe(rename('boot.js'))
// .pipe(gulp.dest(libDist));
//})
// Moving html
gulp.task('move-html', function () {
var opts = {
empty: true
};
return gulp.src([src + 'client/static/**/**/*.html', src + 'client/static/**/**/*.swf'])
.pipe(minifyHTML(opts))
.pipe(gulp.dest(HTMLDist));
});
gulp.task('minify-css', ['move-assets', 'move-html-index', 'move-html-index-mobile'], function() {
return gulp.src(HTMLDist + 'assets/css/*.css')
.pipe(cleanCSS())
.pipe(gulp.dest(HTMLDist + 'assets/css/'));
})
gulp.task('move-assets', function () {
return gulp.src(src + '/client/static/assets/**/*.*')
.pipe(gulp.dest(HTMLDist + 'assets/'));
});
// Moving html index
gulp.task('move-html-index', function () {
var assets = useref.assets();
//.pipe(gulpif('**\/da-*.js', embedTemplates()))
return gulp.src(src + 'client/index.html')
.pipe(assets)
.pipe(gulpif('*.js', embedTemplates()))
.pipe(gulpif('.*\.js', ngAnnotate()))
.pipe(gulpif('.*\.js', uglify()))
.pipe(rev())
.pipe(assets.restore())
.pipe(useref())
.pipe(revReplace())
.pipe(debug())
.pipe(gulp.dest(indexDist));
});
gulp.task('move-html-index-mobile', function () {
var assets = useref.assets();
return gulp.src(src + 'client/indexMobile.html')
.pipe(assets)
.pipe(gulpif('*.js', embedTemplates()))
.pipe(gulpif('.*\.js', ngAnnotate()))
.pipe(gulpif('.*\.js', uglify()))
.pipe(assets.restore())
.pipe(useref())
.pipe(gulp.dest(indexDist));
})
gulp.task('embed-templates', [], function () {
return gulp.src([src + 'client/static/states/**/da*/*.js', src + 'client/static/common/**/da*/*.js'])
.pipe(gulpif('*.js', embedTemplates()))
.pipe(ngAnnotate())
.pipe(uglify())
.pipe(gulp.dest(indexDist))
});
// Build dist task
gulp.task('build-dist', ['move-html', 'move-server-js', 'move-config-js', 'minify-css'], function () {
console.log('Dist ready...');
});
grunt-usemin
中的答案是否定的,但在其中一个依赖项中:grunt-filerev
。最后一个模块是用于创建您的文件修订版 css
、js
和其他文件的模块。
在执行 grunt-filerev
之后(作为 grunt-usemin
的子任务执行),它会创建一个摘要(存储在您的 grunt 任务中,在 grunt.filerev.summary
下)。摘要包含以下信息:
{
“original.js” : “destination.59bcc35a.js”
}
所以您可以稍后在您选择的字符串替换 method/module 中使用它。
您可以找到有关 grunt-filerev
here 的更多信息。
希望对您有所帮助。