민트코딩90 [템플릿] gulp-file-include 설치 및 gulp-file 설정 1. 설치 npm install --save-dev gulp-file-include 2. gulpfile.js 설정 const gulp = require("gulp"); const fileinclude = require('gulp-file-include'); gulp.task('fileinclude', function() { return gulp.src([ "./src/html/*", // ★★★★ 불러올 파일의 위치 "!" + "./src/html/include*" // ★★★★ 읽지 않고 패스할 파일의 위치 ]) .pipe(fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(gulp.dest('./dist/html')); // ★★★★ 변환한 파일의 저.. 2021. 1. 9. node.js 새 프로젝트 만들기 (0. node 설치 : nvm 설치방법(window 10)) 1. 원하는 위치에 폴더를 생성한다. 2. visual studio code와 같은 코딩 프로그램으로 해당 폴더를 연다. 3. 터미널을 연다. 4. npm init 실행한다. npm init 5. 패키지 이름, 버전, 설명글 등을 입력하라고 나오는데, 추후 수정가능하므로 Enter로 패스한다. 6. 해당 폴더에 node_modules 폴더와 package-lock.json, package.json 파일이 생성되었다면 설치완료이다. 2021. 1. 9. nvm 설치방법(window 10) 1. nvm-set.zip 파일을 다운로드하여 설치한다. Releases · coreybutler/nvm-windows A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows github.com 2. c:\Users{username}\AppData\Roaming\nvm 에서 setting.txt 파일을 복사해, c:에 붙여 넣는다. 3. nvm-set.zip 파일을 다시 설치한다. 4. cmd에 nvm을 입력한다. 만약 'Running version 숫자' 문구가 보인다면, 정상 설치가 된 것이다. 5. 마지막으로, nvm 설치한다. nvm install v10.16.3 + no.. 2021. 1. 9. [로컬 테스트 서버] browser-sync + gulp-sass : scss 수정하고 바로 확인하자 모바일 프로젝트는 웬만한 모든 게 정상작동하기 때문에 큰 문제가 없는데, pc/반응형 web 작업의 경우, 우리의 못난이 익스플로러. 그 못난이 덕분에 크로스 브라우징 확인이라는 조금의 수고가 필요하다. 이에 대한 수고를 덜어주는 플러그인이 browser-sync + gulp-sass 조합이다. 마치 비쥬얼 스튜티오의 live server + live sass compiler 같은 조합으로, browser-sync은 로컬 서버를 생성하고, gulp-sass는 scss를 css로 컴파일하는 플러그인인데, 이 gulp-sass에 browser-sync를 연결해두면, scss 수정과 동시에 서버에 업데이트를 해줘, 새로고침 없이 바로 서버에서 확인 가능하다. 그럼 먼저 browser-sync를 설치해보자. 1.. 2021. 1. 8. [css 초기화] gulp-sass + node-normalize-scss 1. 설치 npm install node-normalize-scss@3.0.0 2. gulpfile.js 설정 const sass = require('gulp-sass'); const sourcemaps = require('gulp-sourcemaps'); const Fiber = require('fibers'); const dartSass = require('dart-sass'); const autoprefixer = require('autoprefixer'); const postcss = require('gulp-postcss'); const apfBrwsowsers = [ 'ie >= 8', ]; gulp.task('sass', function(){ const options = { sass : { .. 2021. 1. 8. [gulp-sass] (dart) sass를 위한 gulp 플러그인 설치 및 설정 2 이제, 브라우져 버전에 맞춰 css 컴파일해보자. 1. 설치 npm install --save-dev gulp-postcss autoprefixer@9.8.5 2. gulpfile.js 설정 const sass = require('gulp-sass'); const sourcemaps = require('gulp-sourcemaps'); const Fiber = require('fibers'); const dartSass = require('dart-sass'); const autoprefixer = require('autoprefixer'); // ★★★★ 고려할 브라우저 버전 설정 const postcss = require('gulp-postcss'); // ★★★★ 위 브라우저에 맞춰 css 컴파일 .. 2021. 1. 8. [gulp-sass] (dart) sass를 위한 gulp 플러그인 설치 및 설정 1 사스(sass), 비쥬얼스튜디오를 사용하면 Live Sass Compiler를 이용해 쉽고 간단하게 사용할 수 있지만, 공동작업이 많은 개발환경의 특성상, 다른 작업자분들의 환경을 고려하지 않을 수 없다. 그래서 찾은 방법이 gulp-sass이다. gulp에 연결해두면, 타 환경에서도 npm만 돌리면 되기에 gulp-sass 설치를 추천한다. 다음은 dart sass를 사용하기 위한 설정 방법인데, 자세히 적기엔 너무 많아서 그러하지 못하였고, 어떤 플러그인을 설치해야하는지, 각 플러그인이 어떤 용도인지 정도만 기입하였다. 그럼 오늘도 즐거운 코딩! 1. 설치 npm install --save-dev gulp-sass gulp-sourcemaps fibers dart-sass 2. gulpfile.js .. 2021. 1. 8. [파일압축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 ··· 3 4 5 6 다음
