[gulp] sass 설치&기본세팅 (min.css, min.js)

set param=test&& gulp

#gulpfile.js 문법

1. 사용할 플러그인 설치  

 - nodejs api      : https://nodejs.org/api/ 

node-v8.9.3-x64.z01

다운로드

node-v8.9.3-x64.zip

다운로드

 

 - npm 패키지    : https://www.npmjs.com/search?q=&page=0&ranking=optimal   

 - gulp 플러그인  : http://gulpjs.com/plugins/ 

 - bower 패키지  : https://bower.io/search/

npm install --save-dev gulp

npm install --save-dev gulp-플러그인이름

 

2. gulpfile.js 플러그인 선언 

var gulp = require('qulp')

var 플러그인이름 = require('gulp-플러그인이름')

- require 로불러와 플러그인을 변수로 담는다.

 

3. 플러그인 task 사용

gulp.task(name, deps, func)

- task : 플러그인 실행

- name : 실행될 task 이름

- deps : 현제 실행될 task 전에 실행될 task [ 'task1이름', 'task2이름']

- func : 현제 task에서 실행될 함수 내용

 

4. 경로지정 

gulp.src('./js/**/*.js')

- src : 경로를가져옴 문자열, 배열 가능

- ('.js/**/*.js') : 현 js 홀더밑에 하위 홀더까지 모든 js 파일을 가져옴

- ! : 제외 시킬 파일 에대해 '!./js/out.js' 사용

 

5. task 실행 내용

gulp.pipe( ... )

- pipe : 플러그인등 순서대로 실행

 

 

gulp projectSetting

_gulpSetting_170119.zip

다운로드

_gulpSetting_171215.zip

다운로드

 

 

 

# 기본 설치  

# 패키지 툴

1. 패키지설치 : https://chocolatey.org/install

 - 관리자 명령 프롬프트 (window)

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

- mac 패키지 설치 : http://brew.sh/

- terminal (sudo) 관리자모드

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

 

2. nodejs 설치 패키지 chocolatey : https://chocolatey.org/packages        

 - 관리자 명령 프롬프트 (y)

choco install nodejs.install   

 

 

1~2. nodejs. 설치 : https://nodejs.org/en/

 

3. nodejs, npm 버젼 확인 , 옵션 확인

 - 명령 프롬프트

node -v 

npm -v

npm -h

 

4. gulp와 bower 글로벌하게 설치 

 - 명령 프롬프트

npm install -g gulp bower

or

npm install -g gulp-cli

- mac

sudo npm install --global gulp

 

5. 작업 홀더에서 패키지 설치

 - 작업 홀더 명령 프롬프트

 - init (package.json)생성, (npm install) 패키지실행

 - install --save-dev gulp (node modules 설치) package.joson 갱신

 - install -d gulp-jshint (node modules 에추가) package.joson 갱신  (--save-dev == -d)

 - npm install (package.joson 설치)

 - npm updade (package.joson 최신버젼 업데이트)

npm init

npm install --save-dev gulp

npm install -d gulp-jshint

npm install 

 

 

 

 

- 에러시

If you're using Windows you can now install all node-gyp dependencies with single command:

 $ npm install --global --production windows-build-tools

and then install the package

 $ npm install --global node-gyp

See full documentation here: node-gyp

 

6. 작업 홀더에서 gulpfile.js 생성 세팅

 -  node_modules/gulp-jshint/gulpfile.js 내용 

 - 작업홀더에 js홀더및, 안에 main.js 파일생성하고 문법오류를 체크할수있게 실행 함수 만들기.

var gulp = require('gulp');
var jshint = requirt('gulp-jshint');

gulp.task('default', function(){
	// place code here 
});


gulp.task('jshint', function(){
    gulp.src("./js/main.js")
    .pipe(jsjint())
    .pipe(jshint.reporter('default'));
});

or

var gulp = require('gulp');
var jshint = requirt('gulp-jshint');

gulp.task('jshint', function(){
    gulp.src("./js/main.js")
    .pipe(jsjint())
    .pipe(jshint.reporter('default'));
});

gulp.task('default', [jshint]);

7. gulpfile.js 테스트  - 명령 프롬프트

 - gulp task이름

-  gulp (으로만 실행하면 task 가 default 인것이 실행됨 )

gulp jshint

 

 

 

# 플러그인 설치&사용 방법 

 

#  gulp-jshint플러그인 설치  (js 오류보고)  and  gulp-plumber and  gulp-util

npm install --save-dev  gulp-jshint

npm install --save-dev  gulp-plumber   // 에러가 있으면 watch 가 멈추는걸 재시작

npm install --save-dev 

gulp-util

 - gulpfile.js 수정 

var gulp = require('gulp');
var jshint= require('gulp-jshint');
var plumber= require('gulp-plumber');
var util= require('gulp-util');

gulp.task('jshint', function(){
	gulp.src('./js/main.js')
    .pipe(plumber())
    .pipe(jshint().on('error', gutil.log))
    .pipe(jshint.reporter('default'));
})

 

#  gulp-changed 플러그인 설치  (변경여부 감지)

npm install --save-dev  gulp-changed

- gulpfile.js 수정 

var gulp = require('gulp');
var changed= require('gulp-changed');
var SRC = './js/*.js';
var DEST = 'dist';

gulp.task('changed', function(){
    return gulp.src(SRC)
    .pipe(changed(DEST))
    .pipe(gulp.dest(DEST));
})

 

#  gulp-watch 플러그인 설치  (홀더 실시간 감시 gulp-changed 같이 사용해야 효과적 )

npm install --save-dev  gulp-watch

- gulpfile.js 수정 

var gulp = require('gulp');
var changed= require('gulp-changed');
var watch= require('gulp-watch');
var SRC = './js/*.js';
var DEST = 'dist';

gulp.task('changed', function(){
  	return gulp.src(SRC)
	.pipe(changed(DEST))
 	.pipe(gulp.dest(DEST));
})

gulp.task('watch', function(){
	gulp.watch(SRC, ['changed']);
});
 
gulp.task('default',['watch'], function(){
	 // 이후 실행될것
});

 

#  gulp-sass 플러그인 설치  

npm install --save-dev  gulp-sass

- gulpfile.js 수정 

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function(){
gulp.src('./dev_assets/css/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./assets/css'))
});

 

#  gulp-clean-css  <=  gulp-minify-css 플러그인 설치  (css 압축)

npm install --save-dev  gulp-clean-css

 - gulpfile.js 수정 ( keepSpecialComments:1 or keepBreaks: true )

var gulp = require('gulp');
var minifyCSS = require(' gulp-clean-css');

gulp.task('minifyCSS', function(){
     return gulp.src('./dev_assets/css/*.css')
     .pipe(minifyCSS({keepSpecialComments:1}))
     .pipe(gulp.dest('./asset/css/'))
})

 

# autoprefixer 밴터 프리릭스 

npm install --save-dev gulp-postcss gulp-sourcemaps autoprefixer 

- gulpfile.js 수정  

gulp.task('autoprefixer', function () {
    var postcss        = require('gulp-postcss');
    var sourcemaps  = require('gulp-sourcemaps');
    var autoprefixer  = require('autoprefixer');
    var processors    =  [
        autoprefixer({browsers: [
            last 2 versions', "Edge > 0", 'ie >= 8', 'safari >=5', 'iOS >=5',
            'Firefox >=3.0','Opera >=10.0', "Android > 0","iOS > 0","FirefoxAndroid > 0"
        ]})
    ];
    return gulp.src('./dev_assets/css/*.css')
        .pipe(sourcemaps.init())
        .pipe(postcss([ autoprefixer( ) ]))
        .pipe(sourcemaps.write('./maps/'))
        .pipe(gulp.dest('./assets/css'));
});

 

# gulp-concat 플러그인 설치 (js 합치기) 

npm install --save-dev gulp-concat

- gulpfile.js 수정  (all.js 이름으로 통합)

- return gulp.src( ['pre-js/one.js', 'pre-js/two.js'] )

var gulp = require('gulp');
var concat= require('gulp-concat');

gulp.task('concat', function(){
    return gulp.src('./dev_assets/js/*.js')
    .pipe(concat('all.js', {newLine: ';'}))
    .pipe(gulp.dest('./assets/js/'))
});

 

# gulp-uglify 플러그인 설치 (js 압축) 

npm install --save-dev gulp-uglify

- gulpfile.js 수정 

var gulp = require('gulp');
var uglify= require('gulp-uglify');

gulp.task('compress', function(){
    return gulp.src('./dev_assets/js/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('./dev_assets/js/'))
});

 

# gulp-spritesmith 플러그인 설치  (자른이미지 합치기) 

npm install --save-dev  gulp-spritesmith

- gulpfile.js 수정 

var gulp = require('gulp');
var spritesmith= require('gulp-spritesmith');

gulp.task('spritesmith', function () {
    var spriteData = gulp.src('images/*.png').pipe(spritesmith({
    imgName: 'sprite.png',
    cssName: 'sprite.css'
    }));
  	return spriteData.pipe(gulp.dest('path/to/output/'));
});

 

#  gulp-imagemin 플러그인 설치  (이미지용양 최적화) 

npm install --save-dev  gulp-imagemin

 - gulpfile.js 수정 ( progressive:true or optimizationLevel:8)

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');

gulp.task('imagemin', function(){
    gulp.src('./dev_assets/images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('./assets/images'))
});

 

# gulp-iconfont플러그인 설치  (svg -> font)

npm install --save-dev gulp-iconfont gulp-iconfont-css

 - gulpfile.js 수정 

var gulp = require('gulp');
var iconfont= require('gulp-iconfont');
var iconfontCss = require('gulp-iconfont-css');

gulp.task('iconfont', function(){
    gulp.src([ ./dev_assets + 'images/svg/**/*.svg' ], {base: ./dev_assets } )
    .pipe(iconfontCss({
        fontName: 'iconfont',                                                // font-family 이름
        //path : './iconfont/_iconfont.scss',   
        targetPath: '../../../dev_assets/scss/lib/iconfont/_iconfont.scss',  // 상대경로
        fontPath: './fonts/',                                                // css 폰트경로
        cssClass: 'iconfont'                                                 // class 접두어
    }))
    .pipe(iconfont({
        fontName: 'iconfont',                                                // 폰트파일 이름
        formats: ['ttf', 'eot', 'woff', 'svg'],
        appendCodepoints: true
    }))
    .on('codepoints', function(codepoints, options){
        //console.log(codepoints, options);
    })
    .pipe(gulp.dest( './assets/css/fonts/'));
});

 

# gulp-html-beautify플러그인 설치 (소스정리)

npm install --save-dev  gulp-html-beautify 

 -gulpfile.js 수정

var gulp = require('gulp');
var htmlbeautify = require('gulp-html-beautify');

gulp.task('htmlbeautify', function() {
    gulp.src('./dev_html/*.html')
    .pipe(htmlbeautify())
    .pipe(gulp.dest('./html/'))
});

 

# gulp-html-beautify플러그인 설치 (소스정리)

npm install --save-dev  gulp-html-beautify 

 -gulpfile.js 수정

var gulp = require('gulp');
var htmlbeautify = require('gulp-html-beautify');

gulp.task('htmlbeautify', function() {
	gulp.src('./dev_html/*.html')
    .pipe(htmlbeautify())
    .pipe(gulp.dest('./html/'))
});

# typescript 플러그인 설치 (typescript , gulp-typescript)

npm install --save-dev  typescript  gulp-typescript  

 -gulpfile.js 수정

var gulp = require('gulp');
const ts = require("gulp-typescript");

task("ts", () => {
  	const folderTree = ["main", "menu1", "menu2"];    //  메뉴 홀더명

    folderTree.forEach((str) => {
    src(["./src/js/" + str + "/*.ts", "!./src/js/common.ts"])
      .pipe(ts({
        alwaysStrict: true,
        strict: true,                        // 엄격한 문법 검사
        noImplicitAny: true,
        removeComments: true, // 주석삭제
        outFile: 'output.js'            // 없으면 각각 파일명으로 
      }))
      .pipe(dest("./dist/js/" + str + "/"));
    });

    return gulp.src('./src/js/*.ts')
    .pipe(ts({
        alwaysStrict: true,
        strict: true,  
        noImplicitAny: true,
        removeComments: true,
        outFile: 'common.js'
    }))
    .pipe(gulp.dest("./dist/js/"));
});

 

# browser-sync 플러그인 설치 (브라우저 자동갱신) or gulp-livereload

npm install --save-dev  browser-sync 

npm install -s-d browser-sync@2.12.10

 - gulpfile.js 수정 

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;

gulp.task('serve', ['minify-css'] function(){
    browserSync.init({ 
    	server: "./"
	});
    gulp.watch("./assets/css/*.css", ['minify-css']);
    gulp.watch("./assets/css/*.css").on('change', reload);
});

 

 

 

 

#플러그인 설치방법 팁

1. gulp-load-plugins 로 package.json 플러그인 불러오기

npm install --save-dev gulp-load-plugins

 

2. gulp-load-plugins 설치후 sass 플러그인 설치

 - gulp-load-plugins 설치전

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function(){
    return gulp.src('./dev/styles/main.scss')
    .pipe(sass())
    .pipe(gulp.dest('./dev/styles/'))
});

- gulp-load-plugins 설치후

var gulp = require('gulp');
var $ = require('gulp-load-plugins');   //  npm install --save-dev gulp-load-plugins (설치후)

gulp.task('sass', function(){
    return gulp.src('./dev/styles/main.scss')
    .pipe($.sass)
    .pipe(gulp.dest('./dev/styles/'))
});

 

 

 

# gulp 기본 사용

# 홀더, 파일 컨트롤

// ---------------------------------
// bulid tasks 
// ---------------------------------

// 홀더 삭제
gulp.task('build:clean', function(cb){
    del([
        'build/**'
        ]. cb);
});

// 홀더 복사
gulp.task('build:copy', ['build:clean'], function(){
    return gulp.src('app/**/*/')
    .pipe(gulp.dest('build/'));
})

// 홀더 이동
gulp.task('build:remove', ['build:copy' ], function(cb){
    del([
        'build/scss/',
        'bulid/js/!(*.min.js)'
    ], cb);
})

// build 적용
gulp.task('build', ['build:copy', 'build:remove' ]); 

// 브라우져 자동 적용
gulp.task('build:serve', function(){
    browserSync({
        server:{
            baseDir:'./build/'
        }
    });
});

(fundamental , reference, prerequisite )

 

 

# gulp 파라미터 전달

function executionFunction(cb){
  let param          = process.env.param;
  console.log("param: ", parma)
  return cb();
}

gulp.task('exeparma', executionFunction );

// param: test

 

- window 실행

set param=test&& gulp exeparam

 

- mac 실행

param=test gulp exeparam