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

gabrielflorit/gulp-smoosher: Inline css and js links with file contents

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

开源软件名称(OpenSource Name):

gabrielflorit/gulp-smoosher

开源软件地址(OpenSource Url):

https://github.com/gabrielflorit/gulp-smoosher

开源编程语言(OpenSource Language):

JavaScript 100.0%

开源软件介绍(OpenSource Introduction):

gulp-smoosher Build Status

Replaces css and js links with file contents

Install

Install with npm

npm install --save-dev gulp-smoosher

Example

index.html

<html>
	<head>
		<!-- smoosh -->
		<link rel='stylesheet' href='styles.css'>
		<!-- endsmoosh -->
	</head>
...

NOTE: Make sure to wrap the tags you want to be imported with the smoosh and endsmoosh comments.

styles.css

body {
	background: red;
}

Gulpfile.js

var gulp = require('gulp');
var smoosher = require('gulp-smoosher');

gulp.task('default', function () {
	gulp.src('index.html')
		.pipe(smoosher())
		.pipe(gulp.dest('dist'));
});

dist/index.html

<html>
	<head>
		<style>body {
			background: red;
		}</style>
	</head>
...

Options

Custom js/css tags

Pass in custom js/css tags, if so desired. Example:

var gulp = require('gulp');
var smoosher = require('gulp-smoosher');

gulp.task('default', function () {
	gulp.src('index.html')
		.pipe(smoosher({
			cssTags: {
				begin: '<p:style>',
				end: '</p:style>'
			},
			jsTags: {
				begin: '<p:script>',
				end: '</p:script>'
			}
		}))
		.pipe(gulp.dest('dist'));
});

will result in the following:

<html>
	<head>
		<p:style>body {
			background: red;
		}</p:style>
		<p:script>alert('Hello world!');</p:script>
	</head>
...

Custom base dir

Say your index.html is still in your src/ directory and files you intend to smoosh are already written to your dist/. In this case, specify a custom base to resolve your files from.

gulp.task('default', ['minifyCss', 'uglifyJs'], function () {
	gulp.src('src/index.html')
		.pipe(smoosher({
			base: 'dist'
		}))
		.pipe(gulp.dest('dist'));
});

Ignore files not found

When the option ignoreFilesNotFound is true the plugin will keep running even if it finds a nonexistent file:

gulp.task('default', function () {
	gulp.src('src/index.html')
		.pipe(smoosher({
			ignoreFilesNotFound: true
		}))
		.pipe(gulp.dest('dist'));
});

Notes

If you use grunt instead of gulp, but want to perform a similar task, use grunt-html-smoosher.

Contributors

  • Gabriel Florit
  • Andrew Shaffer
  • Jackson Ray Hamilton
  • lneves12

License

MIT © Gabriel Florit




鲜花

握手

雷人

路过

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

请发表评论

全部评论

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

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

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

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

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