記錄在騰訊課堂中的知了課堂中的學習內容。
前端環(huán)境配置：
- 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 執(zhí)行
- 實際應用
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())
});
//定義處理圖片的業(yè)務
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())
});
//定義監(jiān)處理html的任務
gulp.task("html",function () {
gulp.src(path.html + '*.html')
.pipe(bs.stream())
})
//定義監(jiān)聽文件
//監(jiān)聽以下文件，若發(fā)生變化，則執(zhí)行相應的任務
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':'./'
}
}
);
});
//創(chuàng)建默認任務
gulp.task("default",['bs','watch']);
- 寫一點css文件，在html中加入llink。
執(zhí)行 gulp css
執(zhí)行 gulp
