快速搭建gulp項目實戰

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

目錄中的結構