javascript23 [파일압축2] gulp-clean-css : 넌 거리두기 하지마(minify) css는 경량화한다 해도 읽히는 속도차가 크지 않아, 경량화작업을 하시는 분도 계시고 안하시는 분도 계신다. 필자의 경우, 서버용이니 아주 조금이라도 빨리 읽히게 하기 위해, 또, '코드 도둑들, 조금이라도 귀찮게 해 주겠어!!' 마인드로 경량화를 돌리는 편이다(물론 경량화를 다시 정렬해주는 사이트도 많고 플러그인도 많다). src > css > a.css : body { padding: 0; margin: 0; } src > css > b.css : div { width: 200px; height: 200px; margin: 40px auto; } 1. 설치 npm install --save-dev gulp-clean-css 2. gulpfile.js 설정 const gulp = require("gul.. 2021. 1. 8. [파일압축1] gulp-concat : 파일들아 모여라 운영관리를 위해, 작업파일은 여러개의 css(scss), javascript 파일로 나누는 것이 좋지만, web 서버에 여러개 올리는 것은 옳은 선택이라 보기 어렵다. 서버의, 서버에 의한, 서버를 위한 파일 압축 플러그인! gulp-concat의 설명법이다. a.css : body { padding: 0; margin: 0; } b.css : div { width: 200px; height: 200px; margin: 40px auto; } 1. 설치 npm install --save-dev gulp-concat 2. gulpfile 설정 const gulp = require("gulp"); const cleanCss = require("gulp-clean-css"); const concat = req.. 2021. 1. 8. [코드정렬] pretty, through2 : 소스코드야 줄서자 예로, 아래 코드를 gulp 돌리면, 의미없는 공백들과 제멋대로인 정렬로 소스가 못생겨진다. pretty + through2 은, 동료에게 '정렬이 왜 이따구인거죠?' 말을 안듣기 위한 플러그인이랄까? {% set navigation = [ { 'name': '1' , 'url': '1.html' }, { 'name': '2' , 'url': '2.html' }, { 'name': '3' , 'url': '3.html' } ] %} {% extends "../templates/layout.njk" %} {% block content %} {% for item in navigation %} {{item.name}} {{item.name}} {% endfor %} {% endblock %} 1 1 2 2 3.. 2021. 1. 8. gulp-data : json 데이터 좀 html에 기입해주시겠습니까 1. 설치 npm install --save-dev gulp-data 2. gulpfile.js 설정 2-1: pipe에 직접 데이터 삽입 const gulp = require("gulp"); const nunjucksRender = require("gulp-nunjucks-render"); const data = require('gulp-data'); // ★★★★ gulp-data add gulp.task("nunjucks-html", function(){ return gulp .src("src/html/pages/*") .pipe( // ★★★★ gulp-data add data(function(){ return require("./src/page_data.json") }) ) .pipe (nunj.. 2021. 1. 8. [템플릿] gulp-nunjucks-render : function(if, for, marco) 1. If 문 {% if 값 %} It is true {% endif %} {% if hungry %} I am hungry {% elif tired %} I am tired {% else %} I am good! {% endif %} && → and || → or ! →not {% if happy and hungry %} I am happy *and* hungry; both are true. {% endif %} {% if happy or hungry %} I am either happy *or* hungry; one or the other is true. {% endif %} 2. for 문 {% for 아이템 in 배열 %} {{ 아이템 }} {% endfor %} 2-1. 샘플 {% set nav.. 2021. 1. 7. [템플릿] gulp-nunjucks-render : 기본 사용법 0. 파일트리 ├─dist ├─node_modules ├─src │ ├─html │ │ ├─pages // 각 페이지가 들어갈 폴더 │ │ │ └─home.njk │ │ └─templates // 템플릿이 들어갈 폴더 │ │ └─layout.njk │ ├─img │ ├─scss │ └─js ├─gulpfile.js ├─package-lock.json └─package.json 1. block {% block 블럭명 %} {% endblock %} 템플릿 페이지 내, 각 페이지마다 다르게 들어갈 부분에 위의 태그를 삽입한다. 블럭명은 운영관리를 위해 들어갈 내용의 타이틀을 기입하는 것을 추천한다. layout.njk: {% block content %} {% endblock %} 2. extends {% .. 2021. 1. 7. [템플릿] gulp-nunjucks-render : 설치 및 gulpfile 설정 / 설명 추가 1. 설치 npm install --save-dev gulp-nunjucks-render 정상 설치가 되면, package.json 파일에 다음과 같은 내용이 추가된다. "devDependencies": { "gulp": "^4.0.2", // gulp 필수 ~ "gulp-nunjucks-render": "^2.2.3" }, 다음은 아래 예들을 위한 파일트리이다. ├─dist ├─node_modules ├─src │ ├─html │ │ ├─pages // 각 페이지가 들어갈 폴더 │ │ │ └─home.njk │ │ └─templates // 템플릿이 들어갈 폴더 │ │ └─layout.njk │ ├─img │ ├─scss │ └─js ├─gulpfile.js ├─package-lock.json └─pa.. 2021. 1. 7. gulp 설치 및 .src() .pipe() .dest() / 설명 수정 추가 :( 1. gulp-cli 글로벌 설치(최초 1번만 설치) npm install --global gulp-cli 2. 프로젝트에 gulp 설치 npm install --save-dev gulp 3. gulpfile.js 생성 프로젝트 root에 gulpfile.js를 생성 후, 아래와 같이 설정한다. const gulp = require("gulp"); // ★★★★ gulp 플러그인 사용시 필수 사항 gulp.task('func이름1', function() { return func기능1 }); gulp.task('func이름2', function() { return func기능2 }); gulp.task( "default", gulp.parallel( "func이름1", "func이름2", )); 3-1. .. 2021. 1. 7. 이전 1 2 다음
