Bootstrap - free theme Atlantis 설치

<Corona> free theme을 project에 적용해서 이리저리 돌려보다가

alert 라이브러리도 없고, table 기능도 기본 뿐이라 추가로 라이브러리만

다운 받아 써볼까 하다가 더 마음에 드는 free theme 발견! 😆

 

 

 

 

색상도 더 마음에 들고, 제가 필요로 했던 라이브러리들이 더 포함되어 있습니다.

Datatable도 포함되어 있어 다양한 filtering도 가능합니다.

다운로드는 여기에서 가능하고 Download 버튼을 누르고

email 입력 시 다운 경로를 보내줍니다.

 

 

파일 구조는 아주 간단하게 되어 있습니다.

 

 

 

documentation을 보면 components, plugin에 대한 설명이 나와있습니다.

 

https://themekita.com/demo-atlantis-lite-bootstrap/livepreview/documentation/index.html

Atlantis Bootstrap Dashboard

 

 

기존 프로젝트에 바로 bootstrap을 사용해보니 코드가 

누더기가 되었기에... 

이번에는 아예 새로운 프로젝트를 생성해서 하나 하나

만들어가 보려고 합니다.

 

 

 

ASP.NET 새 빈 웹 사이트를 생성하고 <Atlantis>의

assets 폴더를 복사해 옵니다.

그러면 프로젝트에는 assets, web.config만 존재합니다.

 

<Corona> theme은 node-modules, gulp file.js가 모두 

포함되어 있었는데 <Atlantis> theme은 아무것도 없기 때문에

새로 생성이 필요할 것 같습니다.

 

 

documentation에서 Colors 부분을 보면 이렇게 나와있습니다.

 

1. 프로젝트의 zip 다운로드
2. node.js(https://nodejs.org/en/)가 설치되어 있는지 확인하십시오.
3. package.json이 있는 소스 폴더의 터미널/콘솔에 npm install을 입력합니다.
4. asset/scss/atlantis/_variables.scss에서 색상을 찾을 수 있습니다.
5. 단일 컴파일의 경우 터미널 gulp compile-scss에서 실행하거나 *.scss 파일의 변경 사항을
지속적으로 컴파일하려면 gulp watch에서 실행하십시오.
이 명령은 gulpfile.js 및 package.json이 있는 동일한 폴더에서 실행되어야 합니다.

 

이 중에 완료된 건 프로젝트, node.js 뿐이군요....

나머지들을 설치해 보도록 합니다.

gulp 설치 방법은 gulp API가 가장 정확하니 참고하세요.

(node.js 설치는 여기를 참조하세요)

 

 

해당 프로젝트 파일 주소창에 cmd. 을 입력하면 바로 커맨드 창이 열립니다.

 

 

Check for node, npm, and npx

아래 코드를 입력하여 node, npm이 잘 설치되어 있는지 확인합니다.

node -v
npm -v
npx -v

 

 

Install the gulp command line utility

gulp -cli를 설치해 줍니다.

npm install -g gulp-cli

 

 

Create a package.json file in your project directory

그리고 아래 코드를 입력 후 enter를 한 열번 쯤 누르면 

해당 프로젝트 파일에 package.json이 생성된 것을 확인하실 수 있습니다.

npm init

 

 

Install the gulp package in your devDependencies

gulp package까지 설치하면 node_modules, package-lock.json까지

폴더에 생성되는 것을 확인할 수 있습니다.

npm install --save-dev gulp

 

 

Verify your gulp versions

gulp version까지 확인해 줍니다.

gulp -v

 

 

Create a gulpfile

텍스트 편집기를 사용하여 프로젝트 루트에 다음 내용으로 gulpfile.js라는 파일을 만듭니다.

function defaultTask(cb) {
  // place code for your default task here
  cb();
}

exports.default = defaultTask

 

 

Test it

프로젝트 디렉터리에서 gulp 명령을 실행합니다.

gulp

 

 

Result

기본 작업이 실행되고 아무 작업도 수행하지 않습니다.

 

 

여기까지 하면 설치는 완료입니다. 

추가로 필요한 플러그인이 있다면 쓰면서 설치해도 될 것 같습니다.

(gulp setting 참고 https://maybe-b50.tistory.com/26)

 

 

그런데 gulp API 에서는 ES6 신문법을 사용하고 있기 때문에

제가 쓰는 프로젝트 환경에는 맞지 않습니다.

그리고 gulpfile.js 구성하는 방법도 잘 모르겠어서

결국 ES5로 작성된 sample을 찾아 봤습니다.

(gulpfile.js sample 참고 https://github.com/gulpjs/gulp)

 

 

 

Sample gulpfile.js

'use strict'
var gulp = require('gulp');
var less = require('gulp-less');
var babel = require('gulp-babel');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var cleanCSS = require('gulp-clean-css');
var del = require('del');

var paths = {
  styles: {
    src: 'src/styles/**/*.less',
    dest: 'assets/styles/'
  },
  scripts: {
    src: 'src/scripts/**/*.js',
    dest: 'assets/scripts/'
  }
};

/* Not all tasks need to use streams, a gulpfile is just another node program
 * and you can use all packages available on npm, but it must return either a
 * Promise, a Stream or take a callback and call it
 */
function clean() {
  // You can use multiple globbing patterns as you would with `gulp.src`,
  // for example if you are using del 2.0 or above, return its promise
  return del([ 'assets' ]);
}

/*
 * Define our tasks using plain functions
 */
function styles() {
  return gulp.src(paths.styles.src)
    .pipe(less())
    .pipe(cleanCSS())
    // pass in options to the stream
    .pipe(rename({
      basename: 'main',
      suffix: '.min'
    }))
    .pipe(gulp.dest(paths.styles.dest));
}

function scripts() {
  return gulp.src(paths.scripts.src, { sourcemaps: true })
    .pipe(babel())
    .pipe(uglify())
    .pipe(concat('main.min.js'))
    .pipe(gulp.dest(paths.scripts.dest));
}

function watch() {
  gulp.watch(paths.scripts.src, scripts);
  gulp.watch(paths.styles.src, styles);
}

/*
 * Specify if tasks run in series or parallel using `gulp.series` and `gulp.parallel`
 */
var build = gulp.series(clean, gulp.parallel(styles, scripts));

/*
 * You can use CommonJS `exports` module notation to declare tasks
 */
exports.clean = clean;
exports.styles = styles;
exports.scripts = scripts;
exports.watch = watch;
exports.build = build;
/*
 * Define default task that can be called by just running `gulp` from cli
 */
exports.default = build;

 

 

gulpfile.js에 위 코드를 붙여 넣습니다.

여기서 사용된 플러그인들을 살펴 보겠습니다.

 

gulp-less : Less 파일을 CSS로 컴파일하기 위해 특별히 제작된 Gulp 플러그인
gulp-babel : JavaScript 파일을 es6에서 es5로 변환, 완료되면 서버를 시작하여 변경 사항 테스트
gulp-concat : 모든 소스 파일을 사슬처럼 연결
gulp-uglify : 자바스크립트 파일 축소기
gulp-rename :  파일 이름을 쉽게 바꾸는 gulp 플러그인
gulp-clean-css : 불필요한 공백 제거, 주석 제거, 모든 선택기의 마지막 세미콜론 삭제 등 CSS 축소기
del : 파일 시스템에서 하나 이상의 파일 또는 디렉토리 삭제

 

 

 

흠... 다 필요한지는 모르겠지만 일단 모두 설치해 봅니다.😅

 

npm install gulp-less gulp-babel gulp-concat gulp-uglify gulp-rename gulp-clean-css del --save-dev

 

 

그리고 babel은 추가로 코드 입력이 필요합니다.

npm install --save-dev gulp-babel @babel/core @babel/preset-env

 

 

마지막으로 잘 작동하는지 확인!

gulp

 

 

 

 

 

드디어 설치 끝!!

휴.. 그래도 저번에 비해서는 빠르게 끝났습니다.

다음 포스팅에서는 새 프로젝트에서 페이지를

하나씩 생성해보도록 하겠습니다.