# gulp-split-js-css
**Repository Path**: jae/gulp-split-js-css
## Basic Information
- **Project Name**: gulp-split-js-css
- **Description**: Gulp split js and css from html,gulp从html中分离出js和css
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-07-18
- **Last Updated**: 2021-11-02
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# gulp-split-js-css
Gulp split js and css from html,gulp从html中分离出js和css
## Installation
```shell
npm install gulp-split-js-css
```
## Usage 1
`gulpfile.js`
```javascript
var gulp = require('gulp');
var splitJsCss = require('gulp-split-js-css');
//文件过滤
var filter = require('gulp-filter');
//在html中引用js和css
var inject = require('gulp-inject');
gulp.task('default', function() {
var stream = gulp.src('./src/index.html')
.pipe(splitJsCss({
type:['js','css']
}));
var jsFilter = filter('**/*.js');
var cssFilter = filter('**/*.css');
var htmlFilter = filter('**/*.html');
var jsStream = stream.pipe(jsFilter);
var cssStream = stream.pipe(cssFilter);
var htmlStream = stream.pipe(htmlFilter);
jsStream = jsStream.pipe(gulp.dest('dist/js'));
cssStream = cssStream.pipe(gulp.dest('dist/css'));
return htmlStream.pipe(inject(jsStream))
.pipe(inject(cssStream))
.pipe(gulp.dest('./dist'));
});
```
`./src/index.html`
```html
gulp-split-js-css
This is string.
```
### Out 输出结果
`./dist/index.html`
```html
gulp-split-js-css
This is string.
```
`./dist/js/index.js`
```javascript
var msg = function(str){
alert(str);
};
var str = 'string';
msg(str);
```
`./dist/css/index.css`
```css
body {
margin:0
}
a:hover, a:active {
outline:0
}
abbr[title] {
border-bottom:1px dotted
}
```
## Usage 2
```javascript
var gulp = require('gulp');
var sjc = require('gulp-split-js-css');
//文件过滤
var filter = require('gulp-filter');
//在html中引用js和css
var inject = require('gulp-inject');
var foreach = require('gulp-foreach');
gulp.task('default', function() {
return gulp.src('./src/*.html')
.pipe(foreach(function(streamX, file) {
var stream = streamX.pipe(sjc({
type: ['js', 'css']
}));
var jsFilter = filter('**/*.js');
var cssFilter = filter('**/*.css');
var htmlFilter = filter('**/*.html');
var jsStream = stream.pipe(jsFilter);
var cssStream = stream.pipe(cssFilter);
var htmlStream = stream.pipe(htmlFilter);
jsStream = jsStream.pipe(gulp.dest('dist/js'));
cssStream = cssStream.pipe(gulp.dest('dist/css'));
return htmlStream.pipe(inject(jsStream))
.pipe(inject(cssStream));
})).pipe(gulp.dest('./dist'));
});
```
## Parameters 参数
### type
Type:`String`|`Array`,split type `js` or `css`,defalut value `['js','css']`
指定分离类型，可以只分离出js或者css，默认都分离
**注**:标签加上`inline`属性后,将被跳过,不会被分离出来.