快速搭建gulp項目實戰

  • 2019 年 10 月 6 日
  • 筆記

gulp是前端開發過程中對程式碼進行構建的工具，是自動化項目的構建利器；她不僅能對網站資源進行優化，而且在開發過程中很多重複的任務能夠使用正確的工具自動完成；使用她，我們不僅可以很愉快的編寫程式碼，而且大大提高我們的工作效率。

正文

1. 安裝NodeJS，自行在node官網下載，並安裝，通過node-v檢查是否安裝成功

2.在此項目中，使用的是cnpm進行安裝的，如果想使用cnpm安裝，去淘寶鏡像安裝cnpm

$ npm install -g cnpm --registry=https://registry.npm.taobao.org   安裝cnpm

2. 安裝Gulp環境

1.安裝全局環境，運行命令

npm install gulp –g

3. 項目中使用Gulp

     1.創建一個新的文件夾(gulp創建的文件夾)，進行初始化  cnpm init會出現下面內容，並在文件夾中有一個package.json

2.在命令中運行安裝本地Gulp環境

 cnpm install gulp --save-dev

3.在本地文件新建文件名為 gulpfile.js 文件：　

常用的一些方法    gulp.task 定義任務    gulp.src   找到執行文件    gulp.dest  執行任務的文件去出    gulp.watch 觀察文件是否發生變化

4.安裝一些常用的壓縮包

cnpm install gulp-minify-css gulp-uglify gulp-concat --save-dev    /////////////////    1.css壓縮 　　gulp-minify-css    2.js壓縮　　　gulp-uglify    3.js合併　　　gulp-concat　    4.圖片壓縮    gulp-imagemin    5.less轉化成css gulp-less    ......

5.在文件中新建一個src目錄，用於存放你文件，

6.實現一個文件合併，在src下面創建兩個html文件

var gulp = require('gulp');      gulp.task("copyHtml",function(){  	gulp.src("src/*.html") //當前目錄下所有的html文件  		.pipe(gulp.dest("dist")) //文件的去處  })  dist是通過 gulp copyHtml生成的文件夾

　　常用的程式碼壓縮

var gulp = require('gulp');  var imagemin = require('gulp-imagemin');   圖片壓縮  var uglify = require("gulp-uglify");  js壓縮  var less = require('gulp-less');      less  var cleanCSS = require('gulp-clean-css');  css壓縮    //文件合併  gulp.task("copyHtml",function(){  	gulp.src("src/*.html")  		.pipe(gulp.dest("dist"))  //把src目錄中所有html格式的文件全部合併到dist目錄中  })    //圖片壓縮  gulp.task("imagemin",function() {  	gulp.src("src/images/*")   所有src > images中的圖片  		.pipe(imagemin())  圖片壓縮  		.pipe(gulp.dest("dist/images"))  //放入到dist目錄下面的images文件  })    //js壓縮  gulp.task("uglify",function() {  	gulp.src("src/js/*.js")  		.pipe(uglify()) //壓縮js程式碼  		.pipe(gulp.dest("dist/js")) //通過gulp uglify命令，自動輸出dist下面js文件  })    //css壓縮並less轉換成css  gulp.task("lessc",function() {  	gulp.src("src/less/*.less")  //手動創建  		.pipe(less()) //將less文件編譯成css文件  		.pipe(cleanCSS())  //壓縮css  		.pipe(gulp.dest("dist/css"))   //通過gulp lessc 命令，自動輸出dist/css文件  })    //監聽文件是否有變化  gulp.task("watch",function(){  	gulp.watch("src/*.html",['copyHtml']);  	gulp.watch("src/images/*",['imagemin']);  	gulp.watch("src/js/*.js",['uglify']);  	gulp.watch("src/lessc/*.less",['lessc'])  })  通過輸入gulp watch自動編譯

目錄中的結構

Tags:

VirMach 便宜 VPS