? ? ? ?gulp是前端自動化工具，它可以進行html壓縮、css壓縮合并、js檢查壓縮、圖片壓縮、編譯less、編譯sass等，還可以自動完成開發過程中一些重復的的任務，使我們的工作效率大大的提高呀！那具體如何配置以及使用gulp呢??
1.安裝node.js
?1.1 ? 因為gulp是基于node,所以首先我們需要搭建node環境。
? ? ? ? ?這一步非常簡單，進入node.js官網下載所對應的版本。
? ? ? ? 下載后傻瓜式安裝即可。
1.2? 打開命令行(window + r)
? ?node -v ? ?查看安裝的nodejs版本，出現版本號，說明剛剛已正確安裝nodejs
2.安裝npm
2.1 ?npm是nodejs的包管理器，用于node插件管理（包括安裝、卸載、管理依賴等）。
? npm -v ? ? 查看npm版本號
2.2 ?使用npm安裝插件
?npm install gulp-less --save-dev ? ? ? ? ?以安裝less為例
2.3 ?由于npm安裝插件是從國外服務器下載，可能出現異常，所以可以直接選擇安裝cnpm!
?npm install cnpm -g --registry=https://registry.npm.taobao.org
? ? ? cnpm與npm的用法完全一致，執行命令時可以將npm用cnpm代替。
3.全局安裝gulp
3.1 安裝命令
? cnpm install gulp -g
3.2 查看版本
? gulp -v
4.新建pakage.json文件
4.1 ?package.json是基于nodejs項目必不可少的配置文件，存放在項目根目錄下。
4.2 定位到項目文件
cd ?項目文件位置
4.2 新建命令
?cnpm init
然后一直回車，package.json就新建完成了。不過要注意的是此文件不能添加任何注釋哦~
5.本地安裝gulp
5.1 本地安裝gulp（定位到項目文件）
?cnpm install gulp --save-dev
在這里要跟大家說明的是全局安裝gulp是為了執行gulp任務，本地安裝gulp則是為了調用gulp的插件。
5.2 安裝插件
?cnpm install gulp-sass --save-dev ? ? ? ? ?以安裝sass插件為例
cnpm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename gulp-jshint-html-reporter --save-dev ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 常用插件
6.新建gulpfile.js文件
6.1 gulpfile.js是gulp項目的配置文件, 基本如下：
//導入工具包 require('node_modules里對應模塊')
var gulp = require('gulp');
var less = require('gulp-less'); ? ? ? ? ? ? ? ? ? ? ? ? //編譯less
var sass = require('gulp-sass'); ? ? ? ? ? ? ? ? ? ?? //編譯sass
var htmlmin = require('gulp-htmlmin'); ? ? ? ? ?? //html壓縮
var minifycss = require('gulp-minify-css'); ? ?? //css壓縮
var concat = require('gulp-concat'); ? ? ? ? ? ? ? //文件合并
var uglify = require('gulp-uglify'); ? ? ? ? ? ? ? ? ? ? //js壓縮
var rename = require('gulp-rename'); ? ? ? ? ? ?//重命名
var jshint = require('gulp-jshint'); ? ? ? ? ? ? ? ? ? ?//js檢查
var imagemin = require('gulp-imagemin'); ? ? //壓縮圖片
var cache = require('gulp-cache'); ? ? ? ? ? ? ? ? //圖片壓縮緩存
var clean = require('gulp-clean'); ? ? ? ? ? ? ? ? ?//清空文件夾
var rev = require('gulp-rev'); ? ? ? ? ? ? ? ? ? ? ? ? //更改版本號
//定義一個less任務（自定義任務名稱）
gulp.task('less', function () {
? ? return gulp.src('./src/style.less') ? ? ? ? ? ? ?//需要操作的文件
? ? ? ? .pipe(less()) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//該任務調用的模塊
? ? ? ? .pipe(gulp.dest('./dest')) ? ? ? ? ? ? ? ? ? ? ? //文件導出的位置
})
//定義一個sass任務（自定義任務名稱）
gulp.task('sass', function () {
? ? return gulp.src('./src/style2.scss')
? ? ? ? .pipe(sass())
? ? ? ? .pipe(gulp.dest('./dest'))
})
//語法檢查
gulp.task('jshint', function () {
? ? return gulp.src('./src/js/*.js')
? ? ? ? .pipe(jshint())
? ? ? ? .pipe(jshint.reporter('default'));
});
//壓縮html
gulp.task('htmlmin', function () {
? ? var options = {
? ? ? ? collapseWhitespace: true,
? ? ? ? collapseBooleanAttributes: true,
? ? ? ? removeComments: true,
? ? ? ? removeEmptyAttributes: true,
? ? ? ? removeScriptTypeAttributes: true,
? ? ? ? removeStyleLinkTypeAttributes: true,
? ? ? ? minifyJS: true,
? ? ? ? minifyCSS: true
? ? };
? ? gulp.src('./src/html/*.html')
? ? ? ? .pipe(htmlmin(options))
? ? ? ? .pipe(gulp.dest('html'));
});
//壓縮css
gulp.task('minifycss', function () {
? ? return gulp.src('./src/css/*.css')
? ? ? ? .pipe(concat('main.css')) ? ? //合并所有css到all.css
? ? ? ? .pipe(gulp.dest('css')) ? //輸出文件夾
? ? ? ? .pipe(rename({suffix: '.min'})) ? //rename壓縮后的文件名
? ? ? ? .pipe(minifycss()) ? //執行壓縮
? ? ? ? .pipe(gulp.dest('css')); ? //輸出文件夾
});
//壓縮，合并 js
gulp.task('minifyjs', function () {
? ? return gulp.src('./src/js/*.js')
? ? ? ? .pipe(concat('event.js')) ? ? //合并所有js到main.js
? ? ? ? .pipe(gulp.dest('js')) ? ? ? ? ?//輸出到文件夾
? ? ? ? .pipe(rename({suffix: '.min'})) ? ? //rename壓縮后的文件名
? ? ? ? .pipe(uglify()) ? ? //壓縮
? ? ? ? .pipe(gulp.dest('js')); ? //輸出
});
//壓縮圖片
gulp.task('minifyImg', function () {
? ? return gulp.src('./src/img/*')
? ? ? ? .pipe(imagemin())
? ? ? ? .pipe(gulp.dest('image'));
})
//文件清理
//執行壓縮前，先刪除以前壓縮的文件
gulp.task('clean', function () {
? ? return del(['./css/all.css', './css/all.min.css', './lib/all.js', './lib/all.min.js'])
});
//定義默認任務
//壓縮js需要在檢查js之后操作
gulp.task('default', ['less', 'sass', 'jshint'], function () {
? ? gulp.start('minifycss', 'minifyjs', 'minifyImg', 'htmlmin');
});
7.運行gulp
? ? ?最后回到命令行，直接輸入gulp即可運行！
?gulp?
