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

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人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
ansible/django-gulp-nginx: Django + PostgreSQL + Nginx with Gulp-built static as ...发布时间：2022-06-22
下一篇：
Workiva/wGulp: Opinionated Suite of Gulp Tasks for JavaScript and TypeScript pro ...发布时间：2022-06-22
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

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

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