leeda-cloud

css 사용하던 중 px을 rem으로 변경할 필요가 있었다. 그래서 찾은 gulp-px2rem-converter ! 설치하기 npm i --save-dev gulp-px2rem-converter 기본 사용법 const gulp = require('gulp'); const pxToRem = require('gulp-px2rem-converter') function css(){ return gulp.src('./*.css') .pipe(pxToRem(10)) .pipe(gulp.dest('./dist')) } module.exports.css = css; 내 방식으로 변형해서 아래처럼 사용했다. import gulp from "gulp"; import pxToRem from "gulp-px2rem-conve..

작업을 하다 보니까 파일을 병합할 필요가 있었다. 그래서 찾은 gulp-concat! 사용 방법은 가능하다. 우선 설치를 하고! npm i --save-dev gulp-concat 아래처럼 사용이 가능하다. var concat = require('gulp-concat'); gulp.task('scripts', function() { return gulp.src('./lib/*.js') .pipe(concat('all.js')) .pipe(gulp.dest('./dist/')); }); 이걸 이제 내 방식으로 변형해서 아래 같은 식으로 적용했다. import concat from "gulp-concat"; const style = () => gulp .src(dir.src.css + "**/*.css") ..

먼저 gulp에 대해 잘 모르겠다면 아래 링크를 들어가 참조 부탁드린다. https://leeda-cloud.tistory.com/64 [Gulp] Gulp 노마드코더 (Babel,Task,Pug,이미지 최적화,SASS,Autoprefixer,Minify,Browserify,GH Pages) Gulp란? 반복적이고 귀찮은 작업들을 자동화 시켜놓은 툴이다. gulp를 사용하여 sass들을 컴파일 하거나 css, js, 이미지를 압축화 하기가 쉬워진다. 설치 확인 및 설치 방법 gulp 설치 전에 node가 설치 leeda-cloud.tistory.com 위의 게시물을 보면 gulp 기본 세팅에 대해 정리되어 있다. gulpfile.babel.js를 기준으로 글을 작성하므로 헷갈리면 위의 게시물을 참고하면 ..

먼저 gulp에 대해 잘 모르겠다면 아래 게시물을 먼저 확인 후 참고 부탁드린다. https://leeda-cloud.tistory.com/64 [Gulp] Gulp 노마드코더 (Babel,Task,Pug,이미지 최적화,SASS,Autoprefixer,Minify,Browserify,GH Pages) Gulp란? 반복적이고 귀찮은 작업들을 자동화 시켜놓은 툴이다. gulp를 사용하여 sass들을 컴파일 하거나 css, js, 이미지를 압축화 하기가 쉬워진다. 설치 확인 및 설치 방법 gulp 설치 전에 node가 설치 leeda-cloud.tistory.com 위의 게시물을 보면 기본 세팅에 대해 정리되어 있다. gulpfile.babel.js를 기준으로 글을 작성하므로 헷갈리면 위의 게시물을 참고하면 ..

gulp-typescript 설치 npm install gulp-typescript typescript gulpfile.babel.js에 추가 import gulp from "gulp"; import typescript from "gulp-typescript"; const routes = { ts: { watch: "src/ts/**/*.ts", src: "src/ts/*.ts", dest: "build/ts", }, }; const ts = () => gulp .src(routes.ts.src) .pipe( typescript({ noImplicitAny: true, outFile: "output.js", //routes.js.dest의 위치에 output.js로 파일을 변환시킨다. }) ) .pipe..

gulp 이용 중에 간혹 파일의 줄 정리가 깔끔하지 않은 것이 있다. 이런 부분이 신경 쓰이는 사람들을 위한 줄 정리 기능이다. gulp-prettier 설치 npm install --save-dev prettier npm install --save-dev @bdchauvette/gulp-prettier gulpfile.babel.js에 추가 import gulp from "gulp"; import prettier from "@bdchauvette/gulp-prettier"; const routes = { js: { watch: "src/js/**/*.js", src: "src/js/*.js", dest: "build/js", }, }; const js = () => gulp .src(routes.js...

지난번 노마드코더에서 배운 Gulp를 이용 중 include 기능을 추가하고 싶어졌다. 우선 gulp include 파일을 설치하고 gulp 파일에 연결이 필요했다. gulp-file-include 설치 npm install --save-dev gulp-file-include gulpfile.babel.js에 추가 import gulp from "gulp"; import fileinclude from "gulp-file-include"; const routes = { html: { src: "src/html/*.html", dest: "build/" }, include : { src: "src/html/include/*.html", dest: "build/" }, }; const inc = () => g..

노마드코더의 gulp 강의를 기반으로 정리했다. Babel, Task, Pug, 이미지 최적화, SASS, Autoprefixer, Minify, Browserify, GH Pages 등 다양한 것들이 나와 강의가 짧지만 유용하다.https://nomadcoders.co/gulp-for-beginners Gulp 90분 마스터하기 – 노마드 코더 Nomad CodersAutomate Your Workflownomadcoders.coGulp란?반복적이고 귀찮은 작업들을 자동화 시켜놓은 툴이다.gulp를 사용하여 sass들을 컴파일 하거나 css, js, 이미지를 압축화 하기가 쉬워진다.  설치 확인 및 설치 방법 gulp 설치 전에 node가 설치 되어있어야한다.확인하는 방법은 아래와 같다.node --v..