最近想通过django搭建一个项目,为了不半途而废,决定记录一下搭建项目的整个过程。
1.通过pycharm创建一个django项目
创建项目2.新项目计划
项目初始结构
初始结构 制作过程修改之后的结构
修改之后的结构3.使用gulp管理前端项目
计划 初始化gulp加上 --save-dev会自动保存到package.json文件的devDependencies中
初始化gulp下载相应的gulp文件
下载下载后的package.json文件
package.json4.完善gulpfile.js
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 path = {
'html':'./templates/**/',
'css':'./src/css/',
'js':'./src/js/',
'images':'./src/images/',
'cs_dist':'./dist/css/',
'js_dist':'./dist/js/',
'images_dist':'./dist/images/'
}
//定义一个html的任务
gulp.task("html",function(){
gulp.src(path.html +'*.html')//后缀名为html的文件名
.pipe(bs.stream())//重新加载
});
//定义一个css的任务
gulp.task("css",function(){
gulp.src(path.css +'*.css')//后缀名为css的文件名
.pipe(cssnano())//压缩css
.pipe(rename({"suffix":".min"}))//改后缀名
.pipe(gulp.dest(path.css_dist))
.pipe(bs.stream())
});
//定义一个js的任务
gulp.task("js",function(){
gulp.src(path.js +'*.js')//后缀名为js的文件名
.pipe(uglify())//压缩css
.pipe(gulp.dest(path.js_dist))
.pipe(bs.stream())
});
gulp.task("images",function(){
gulp.src(path.js +'*.*')
.pipe(cache(imagemin()))//缓存图片
.pipe(gulp.dest(path.images_dist))
.pipe(bs.stream())
})
//定义监听文件修改
gulp.task("watch",function(){
gulp.watch(path.css +'*.css', ['css']);
gulp.watch(path.html +'*.html', ['html']);
gulp.watch(path.js +'*.js', ['js']);
gulp.watch(path.images +'*.*', ['images']);
})
//初始化brower-sync任务(实时监听修改)
gulp.task("bs",function(){
bs.init({
'server':{
"baseDir":'./'
}
})
})
//创建默认任务
gulp.task("default",['bs','watch']);
5.测试
测试django前端项目创建成功
网友评论