Django項目 第二課 【gulp 前端項目搭建】

前端項目搭建

前端咱們使用gulp來自動化開發流程。配置好gulp後，能夠自動給咱們處理好一些工做。好比寫完css後，要壓縮成 .min.css ，寫完 js 後，要作混淆和壓縮， 圖片壓縮等。這些工做均可以讓gulp幫咱們完成

 

安裝gulp

1：建立本地包管理環境：

使用npm init 命令在本地生成一個 package.json 文件，package.json 是用來記錄你當前這個項目依賴了哪些包，之後別人拿到你得這個項目後，不須要你的node_modules文件夾 （由於node_modules中的包實在太龐大了）。只須要執行 npm install 命令，即會自動安裝 package.json 下 devDependencies中指定的依賴包。

2：安裝gulp

gulp的安裝很是簡單，只要使用npm命令安裝便可。可是由於gulp須要做爲命令行的方式運行，所以須要在安裝在系統級別的目錄中。

npm install gulp -g

 

由於在本地須要使用require的方式gulp。所以也須要在本地安裝一份

npm install gulp --save-dev

以上的--save-dev 是將安裝的包的添加到 package.json 下 devDependencies依賴中。之後經過npm install 便可自動安裝。 devDependencies 這個是用來記錄開發環境下使用的包，若是想要記錄生產環境下使用的包，那麼在安裝包的時候使用 npm install xx --save 就會記錄到 package.json 下的  devDependencies 中。  devDependencies是專門用來記錄生成環境下的依賴包的！

 

3：建立gulp任務

要使用gulp來流程化咱們的開發工做。首先須要在項目的根目錄下建立一個gulpfile.js 文件中填寫一下代碼：

var gulp = require("gulp");

gulp.task("greet", function() {

    console.log("hello world");
});

這裏對代碼一一解釋：

1：經過require語句引用已經按照的第三方依賴包。這個require只能是引用當前項目的，不能引用全局下的。require語法是node.js獨有的，只能在node.js 環境下使用

2：gulp.task 是用來建立一個任務。gulp.task的第一參數是命令的名字，第二個參數是一個函數，就是執行這個命令的時候會作什麼事情，都是寫在這個裏面的

3：寫完以上代碼後，之後若是想要執行greet命令，那麼只須要進入項目所在路徑，而後終端使用gulp greet 便可執行。

 

4：建立處理CSS文件的任務

gulp只是提供一個框架給咱們。若是咱們想要實現一些更加複雜的功能，好比css壓縮，那麼咱們還須要安裝一下 gulp-cssnano插件。gulp相關的插件安裝也是經過npm命令安裝，安裝方式跟其餘包是如出一轍 (gulp插件自己就是一個普通的包)

對css文件的處理，須要作的事情就是壓縮，而後再將壓縮後的文件放在指定目錄下（不要和原來css文件重合了）！這裏咱們使用gulp-cssnano來處理這個工做

npm install gulp-cssnano --save-dev

 

而後在gulpfile.js中寫入代碼

var gulp = require("gulp");
var cssnano = require("gulp-cssnano");

gulp.task("greet", function() {

console.log("hello world");
});

gulp.task("css",function () {
gulp.src("./css/*.css")
.pipe(cssnano())
.pipe(gulp.dest("./dist/css/"))
});

以上代碼進行解釋：

1：gulp.task: 建立一個css處理任務

2：gulp.src：找到當前css目錄下全部以 .css 結尾的 css文件

3：pipe：管道方法。將上一個方法的返回結果傳給另一個處理器。好比以上的 cssnano

4：gulp.dest ：將處理完後的文件，放在指定的目錄下。不要放在和原文件相同的目錄，以避免產生衝突，也不方便管理

 

5：修改文件名：

像以上任務，壓縮完css文件後，最好是給他添加一個 .min.css 的後綴，這樣一眼就能知道這個是通過壓縮後的文件。這時候咱們就須要使用gulp-rename 來

修改了。固然首先也須要安裝npm install gulp-rename --save-dev。示例代碼以下

var gulp = require("gulp");
var cssnano = require("gulp-cssnano");
var rename = require("gulp-rename");

gulp.task("greet", function() {

    console.log("hello world");
});


gulp.task("css",function () {
    gulp.src("./css/*.css")
    .pipe(cssnano())//index.css -> index.min.css
    .pipe(rename({"suffix":".min"}))
    .pipe(gulp.dest("./dist/css/"))
});

在上述代碼中，咱們班增長了一行  .pipe(rename({"suffix":".min"})) , 這個咱們就是使用rename方法，而且傳遞一個對象參數，指定修更名字的規制爲添加一個， .min後綴名，這個gulp-rename還有其餘的指定文件名的方式，好比能夠在文件名前面加一個前綴等。更多的教程能夠看這個: https://www.npmjs.com/package/gulp-rename