快速搭建gulp專案實戰

小周sri的碼農發表於2018-06-29

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自動編譯

目錄中的結構

 

相關文章