目录
【front 】: dist、src、templates 前端网页放入此文件
一,创建django
-
【front 】: dist、src、templates 前端网页放入此文件
- 【src】: css、image、js 文件
- 【dist】:src文件处理完成
- 【templates】: 模板文件
-
【cmd】: 创建package.json文件
- 新建 package.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
-
==============================================================
-
二、编写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']); });
-
三、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