djano前端入门

记录在腾讯课堂中的知了课堂中的学习内容。
前端环境配置：

1. nvm安装
   2.node.js安装

npm install gulp-cssnano --sava-dev
在项目中安装cssnano包

1.新建django项目， 删除templates文件夹
新建front文件夹（表示前端）在front中新建以下文件夹（dist,src{ js,css,images },templates{ index.html } ）
//dist存放处理后的文件如css。js等
//src放js,css,images
//templates 放各个模块中的html

cd front
npm init 

初始化后，会在front目录下生成package.json。可在依赖中加入需要使用的包。devDependencies是手动添加的。内容如下

{
  "name": "xfz_front",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "zhiliao",
  "license": "ISC",
  "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"
  }
}

cd front  
npm install 
//（自动安装devDenpendencies中包）

3.使用管理工具（例子）
(在front目录下)

var gulp  = require("gulp");
//引入包的名称
var cssnano = require("gulp-cssnano");
//开启一个任务
gulp.task("greet",function () {
    console.log("hello world");
});

gulp.task("css",function () {
//src目录下的所有以css结尾的文件
    gulp.src("./css/*.css")
//压缩css
        .pipe(cssnano())
//压缩后保存的
        .pipe(gulp.dest("./dist/css/"))
});
//源文件
//管道
//处理完成生成的位置

gulp css 执行

4. 实际应用

var path = {
    'html':'./templates/**/',
    '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 + '*.css')
        .pipe(cssnano())
        .pipe(rename({"suffix":".min"}))
        .pipe(gulp.dest(path.css_dist))
//保存
        .pipe(bs.stream())

});
//定义处理图片的业务
gulp.task("images",function(){
    gulp.src(path.images + '*.*')
//压缩？
        .pipe(cache(imagemin()))
        .pipe(gulp.dest(path.images_dist))
        .pipe(bs.stream())



});
//处理js的任务
gulp.task("js",function () {
   gulp.src(path.js + '*.js')
       .pipe(uglify())
       .pipe(gulp.dest(path.js_dist))
       .pipe(bs.stream())
});

//定义监处理html的任务
gulp.task("html",function () {
    gulp.src(path.html + '*.html')
        .pipe(bs.stream())
})
//定义监听文件
//监听以下文件，若发生变化，则执行相应的任务
gulp.task("watch",function () {
   gulp.watch(path.css + '*.css',['css']);
   gulp.watch(path.js + '*.js',['js']);
   gulp.watch(path.images + '*.*',['images']);
   gulp.watch(path.html + '*.html',['html'])

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

        }
    );
});

//创建默认任务

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

5. 写一点css文件，在html中加入llink。
   执行 gulp css
   执行 gulp