【項目django-前端】0 環境配置

目錄

 

一，創建django

【front 】: dist、src、templates 前端網頁放入此文件

【cmd】：  創建package.json文件

【gulpfile.js】配置可同步更新

二、編寫gulpfile.js文件

三、sass轉換爲css

---

 

---

 

一，創建django

• 【front 】: dist、src、templates 前端網頁放入此文件

1. 【src】: css、image、js 文件
2. 【dist】:src文件處理完成
3. 【templates】:   模板文件

• 【cmd】：  創建package.json文件

1. 新建 package.json文件   ：cd......xfz2》npm init

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

1. 導入需要文件

,
  "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"
  }

 

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#

• ==============================================================

• 二、編寫gulpfile.js文件

• 1.新建front >>css >> index.css

  2.修改front >> templates >> new >>index.html

   <link rel="stylesheet" href="../../dist/css/index.min.css">

  3.cmd  >>

  >> gulp css #會生成'dist'文件
  
  >> gulp

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

  4.修改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