https://github.com/jae-jae/gulp-split-js-css

Gulp split js and css from html,gulp从html中分离出js和css
https://github.com/jae-jae/gulp-split-js-css

Last synced: about 1 month ago
JSON representation

Gulp split js and css from html,gulp从html中分离出js和css

• Host: GitHub
• URL: https://github.com/jae-jae/gulp-split-js-css
• Owner: jae-jae
• Created: 2017-05-07T15:41:58.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-05-25T14:54:11.000Z (over 7 years ago)
• Last Synced: 2024-10-29T18:49:22.191Z (about 2 months ago)
• Language: JavaScript
• Size: 12.7 KB
• Stars: 0
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

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

	body {

	    margin:0

	}

	a:hover, a:active {

	    outline:0

	}

	abbr[title] {

	    border-bottom:1px dotted

	}

	.c-box{height:40px;width:100%;margin:150px auto;}

This is string.

	var msg = function(str){

		alert(str);

	};

	var str = 'string';

	msg(str);

	var str2 = 'string2';

	msg(str2);

```

### Out 输出结果

`./dist/index.html`

```html

	gulp-split-js-css

	.c-box{height:40px;width:100%;margin:150px auto;}

This is string.

	var str2 = 'string2';

	msg(str2);

```

`./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`属性后,将被跳过,不会被分离出来.