[프로젝트 django-프런트엔드] 0 환경 구성

카탈로그

하나, django 만들기
[front]: dist, src,templates 전단 웹 페이지를 이 파일에 넣습니다
[cmd]: 패키지를 생성합니다.json 파일
[gulpfile.js] 구성은 업데이트를 동기화합니다.
2. gulpfile을 작성한다.js 파일
3.sass가 css로 전환

하나, django 만들기

【front】:dist,src,templates 전단 웹 페이지를 이 파일에 넣기

【src】: css, 이미지, js 파일

【dist】: src 파일 처리 완료

【templates】: 템플릿 파일

【cmd】:package를 생성합니다.json 파일

새 패키지.json 파일:cd...xfz2》npm init

name: (front) xfz_front
description: xfz front code
author: jing

가져오기에 필요한 파일

,
  "devDependencies": {
    "browser-sync": "^2.24.4",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^5.0.0",
    "gulp-cache": "^1.0.2",
    "gulp-concat": "^2.6.1",
    "gulp-concat-folders": "^1.3.1",
    "gulp-connect": "^5.5.0",
    "gulp-cssnano": "^2.1.3",
    "gulp-imagemin": "^4.1.0",
    "gulp-rename": "^1.2.3",
    "gulp-sass": "^4.0.1",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-uglify": "^3.0.0",
    "gulp-util": "^3.0.8",
    "underscore": "^1.9.1"
  }

끝 [cmd] npm install

[gulpfile.js] 설정 동기화 업데이트

/**
 * Created by Administrator on 2019/2/23.
 */
var gulp = require("gulp");
var cssnano = require("gulp-cssnano");
var rename = require("gulp-rename");
var uglify = require("gulp-uglify");
var concat = require("gulp-concat");
var cache = require('gulp-cache');
var imagemin = require('gulp-imagemin');
var bs = require('browser-sync').create();
var sass = require("gulp-sass");
// gulp-util：          log，       js     
var util = require("gulp-util");
var sourcemaps = require("gulp-sourcemaps");

//      
var path = {
    'css': './src/css/',
    'js': './src/js/',
    'images': './src/images/',
    'css_dist': './dist/css/',
    'js_dist': './dist/js/',
    'images_dist': './dist/images/'
};


//     css   
gulp.task("css",function () {
    gulp.src(path.css + '*.scss')
        .pipe(cssnano())
        .pipe(rename({"suffix":".min"}))
        .pipe(gulp.dest(path.css_dist))
});

//     js     
gulp.task("js",function () {
    gulp.src(path.js + '*.js')
        .pipe(uglify())
        .pipe(gulp.dest(path.js_dist))
});

//            
gulp.task('images',function () {
    gulp.src(path.images + '*.*')
        .pipe(cache(imagemin()))
        .pipe(gulp.dest(path.images_dist))
});

//            
gulp.task("watch",function () {
    gulp.watch(path.css + '*.css',['css']);
    gulp.watch(path.js + '*.js',['js']);
    gulp.watch(path.images + '*.*',['images']);
});

//    browser-sync   
gulp.task("bs",function () {
    bs.init({
        'server': {
            'baseDir': './'
        }
    });
});

//          
gulp.task("default",['bs','watch']);
//gulp.task("default",['watch']);

[cmd]front]gulp

http://localhost:3000/templates/news/index.html#

==============================================================

2. gulpfile을 작성한다.js 파일

1.새로 만들기front>css>> index.css 2.front > templates >> new >> index를 수정합니다.html

3.cmd >>

>> gulp css #   'dist'  

>> gulp

http://localhost:3000/templates/new/index.html4.gulpfile을 수정합니다.js(이렇게 하면 웹 페이지 수정이 동기화됩니다)

//      
var path = {
    'html':'./templates/**/',
};


//  html     
gulp.task("html",function () {
    gulp.src(path.html + '*.html')
        .pipe(bs.stream())
});

//            
gulp.task("watch",function () {
    gulp.watch(path.html + '*.html',['html']);
});

http://localhost:3000/templates/new/index.html

셋째,sass가 css

로 전환

설치gulp-sass: npm install gulp-sass--save-dev

gulpfile을 수정합니다.js(#css를 scss로 변경)

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

//     css   
gulp.task("css",function () {
    gulp.src(path.css + '*.scss')   #   scss

});

cmd >>gulp css

cmd >>gulp

[프로젝트 django-프런트엔드] 0 환경 구성

좋은 웹페이지 즐겨찾기