gulp, sass

gulp는 자동화시스템

sass 를 css 로 변환시켜주는 것을 컴파일한다고 하고, 이 컴파일은 gulp 내에 기능에 포함된다.

gulp를 사용하기 위해 node.js를 설치해야 한다. 

// compile sass & inject into browser

gulp.task('sass', function(){

    return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'])

        .pipe(sass())

        .pipe(gulp.dest("src/css"))

        .pipe(browserSync.stream());

});

//move js files to src/js

gulp.task('js', function(){

     return

        gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery_min.js', 'node_modules/popper.js/dist/umd/popper.min.js'])

       .pipe(gulp.dest("src/js"))

       .pipe(browserSync.stream());

});

// Watch Sass & Server

gulp.task('serve', ['sass'], function(){

    browserSync.init({

        server: "./src"

    });

    gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], ['sass']);

    gulp.watch("src/*.html").on('change', browserSync.reload);

});

// Move Fonts folder to src

gulp.task('fonts', function(){

    return gulp.src('node_modules/font_awesome/fonts/*')

        .pipe(gulp.dest("src/fonts"));

    

});

gulp.task('fa', function(){

    return gulp.src('node_modules/font_awesome/css/font-awesome.min.css')

        .pipe(gulp.dest("src/css"));

    

});

gulp.task('default', ['js', 'serve', 'fa', 'fonts']);

emmet install for automated html, css tags

cd ~/.atom/packages
git clone https://github.com/emmetio/emmet-atom
cd emmet-atom
nom install

restart atom editor

nom_modules 지운다 이는 다시 생성된다

src 내에 scss/ index.html 를 제외하고 지운다. 다시 생성된다.