읽기 HTML 파일과 JS/CSS를 발견하고 그것을 축소하세요 오래된 이름을 가진 JS/CSS를 이름을 대체 -

내가 이런 html 파일이 치는 특별한 :읽기 HTML 파일과 JS/CSS를 발견하고 그것을 축소하세요 오래된 이름을 가진 JS/CSS를 이름을 대체 -

<html class="h-100"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Login</title> 

    <!-- main css --> 
    <link rel="stylesheet" href="../src/vendors/clarity-ui/css/clarity-ui.min.css"> 
    <link rel="stylesheet" href="../src/scss/main.css"> 
</head>

내가 그렇게 위해 HTML 파일을 읽을 수를 :

추출 이름과 경로 CSS 나 JS 파일
스크립트의 축소의 CSS 또는 JS
디렉토리에 복사
이름 바꾸기 CS dist에 s 또는 js 경로/이름을 새 위치 및 이름으로 변경하십시오.

Gulp 및 Gulp 플러그인으로 어떻게 할 수 있습니까?

출처

2017-10-03 Ehsan Ali

gulp-useref을 찾으십시오. 난 당신이 이미 축소 된 공급 업체의 CSS를 변경하지 않으 가정 : [당신의 HTML 추가 편집]

<html class="h-100"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Login</title> 

    <link rel="stylesheet" href="../src/vendors/clarity-ui/css/clarity-ui.min.css"> 

    <!-- build:css dist/css/main.css --> 
    <link rel="stylesheet" href="../src/scss/main.css"> 
    <!-- endbuild --> 

    <!-- build:js ../dist/js/myJS.js --> 
    <script src="../src/js/myJS.js"></script> 
    <!-- endbuild --> 

</head>

var gulp = require('gulp'), 
useref = require('gulp-useref'), 
gulpif = require('gulp-if'), 
uglify = require('gulp-uglify'), 
minifyCss = require('gulp-clean-css'); 

gulp.task('html', function() { 
     // I made a small change to gulp.src below 
    return gulp.src('./app/*.html') 
    .pipe(useref()) 
    .pipe(gulpif('*.js', uglify())) 
    .pipe(gulpif('*.css', minifyCss())) 
    .pipe(gulp.dest('dist')); 
});

: 그것은 좋은 예제가 실려있다. 따라서 주위에 지침을 지정할 필요가 없습니다.

그리고 useref는 그 주위에 빌드 지시어가 없으므로 해당 자산을 잡지 않기 때문에 공급 업체 CSS를 연결하지 않습니다.

js 파일과 비슷한 기능을 수행 할 수 있습니다.

[편집 :. 추가 폴더 구조]

-[your working directory] 
---[app] 
-----test.html 
---[src] 
------[scss] 
--------main.css 
------[js] 
--------myJS.js 
-gulpfile.js

그래서 gulpfile.js 앱 및 SRC 폴더 위의 기본 작업 디렉토리에 있습니다.

작업 디렉토리에서 gulp html을 실행하면 축소 된 CSS 및 uglified js와 수정 된 main.html이있는 'dist'폴더가 만들어집니다.

이 폴더 구조로 테스트 시스템에서 실행했으며 완벽하게 작동합니다. 아직도 문제가 있다면 알려줘.

출처

2017-10-03 13:52:59 Mark

감사합니다. @ 마크 그러나 모든 js 또는 css 파일을 연결하고 싶지 않습니다. 유추 파일을 연결하는 데 사용합니다. 너는 어떤 생각을 가지고 있니? –

이것은 예제 코드 일뿐입니다. 예를 들어, 각각 별도로 빌드 지시문을 넣으면 CSS를 연결하지 않습니다. 지시어를 html 파일에 넣은 후에 해 보셨습니까? 지시문은 얻을 CSS 또는 JS 자산 및 이름을 바꿀 이름을 지정합니다. 각각의 개별 CSS에 대한 지시문을 작성하십시오. – Mark

작동하지 않습니다. 이 스크립트로 무엇을해야합니까? –

읽기 HTML 파일과 JS/CSS를 발견하고 그것을 축소하세요 오래된 이름을 가진 JS/CSS를 이름을 대체 -

답변

관련 문제