gulp的使用

1. 電腦安裝node 官網下載node安裝，由於gulp的依賴是基於node環境下使用的。
2. 全局安裝gulp

// npm修改成淘寶鏡像（保證全部依賴下載速度和不丟包的狀況）
	npm install -g cnpm --registry=https://registry.npm.taobao.org
	// 安裝gulp
	cnpm install --save-dev gulp  
複製代碼

3.做爲項目的開發依賴（devDependencies）安裝：好比在文件gulp下執行下面這條命令

npm install --save-dev gulp
複製代碼

4.項目根目錄新建gulpfiles.js 文件 （根目錄就是gulp） a. dist 壓縮文件 b. gulpfirst(項目文件，此文件隨我的習慣) c. gulpfile.js 任務代碼文件 d. package.json 依賴文件配置文件（項目依賴須要使用npm install --save 模塊名）下載

// gulpfile.js文件的基本配置
// 依賴
var gulp = require('gulp'),
    // 清除
    clean = require("gulp-clean"),
    // 壓縮html
    htmlmin = require('gulp-htmlmin'),
    // 壓縮js
    uglify = require('gulp-uglify'),
    // 壓縮css
    cssUglify = require('gulp-minify-css'),
    // 構建服務 gulp server
    connect = require('gulp-connect');
    
// gulp.task(name, fn) - 定義任務，第一個參數是任務名，第二個參數是任務內容。
// gulp.src(path) - 選擇文件，傳入參數是文件路徑。
// gulp.dest(path) - 輸出文件
// gulp.pipe() - 管道，你能夠暫時將 pipe 理解爲將操做加入執行隊列

// 壓縮 js 文件
gulp.task('js', function() {
    // 1. 找到文件
    return gulp.src('./gulpfirst/js/*.js')
    // 2. 壓縮文件
        .pipe(uglify())
        // 3. 另存壓縮後的文件
        .pipe(gulp.dest('./dist/js'))
});
// 壓縮css文件
gulp.task('css',function(){
    return gulp.src('./gulpfirst/css/*.css')
        .pipe(cssUglify())
        .pipe(gulp.dest('./dist/css'))
});
// 壓縮html文件
gulp.task('html', function () {
    return gulp.src("./gulpfirst/*.html")
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest("./dist/"));
});
// 執行清空任務
gulp.task("clean", function(){
    console.log('開始清空dist文件夾 --不清空img ');
    return gulp.src(['./dist/*.html','./dist/css/*','./dist/js/*.js'])
        .pipe(clean());
});
// 默認任務執行
gulp.task('default',gulp.series('clean','html','css','js'));


//創建一個配置對象變量，後面咱們要傳遞給插件用來啓動server
var serverConfig={
    root:'gulpfirst',//從哪一個目錄開啓server
    port:8080,//將服務開啓在哪一個端口
}
//創建一個server任務 直接能夠用 gulp server就能夠執行這個任務
gulp.task('server', function() {
    connect.server(serverConfig);
});
複製代碼

5. 使用gulp項目編譯和啓動項目

// 文件編譯
 gulp
// z在根目錄或者dist文件下
gulp server
複製代碼