gulp構建qq音樂播放器

新建一個項目文件夾

在文件夾中右擊 git bash here出現命令行

查看node npm 的版本

通過 node -v npm -v 來獲取

全局安裝gulp

npm install gulp -g 或者使用 npm install –global gulp

如果安裝過程中出現以下內容：

Unexpected end of JSON input while parsing near ‘…86’,’tarball’:’https:’

可以在命令提示行中輸入：npm cache clean -force 進行解決

cnpm淘寶鏡像安裝

如果用npm 安裝比較慢，可以通過淘寶鏡像進行處理 cnpm
淘寶鏡像的安裝方式：npm install -g cnpm –registry=https://registry.npm.taobao.org

在項目目錄下創建package.json文件

Npm init 上述命令將指引設置項目名/版本/描述信息等，
安裝gulp,作爲開發時依賴項
Npm install –save-dev gulp

Package.json 插件版本號
Package-lock.json 插件安裝目錄
Node_modules 插件安裝包

創建開發和導出文件夾

開發文件夾是src,導出文件夾是dist。

創建html任務

gulp.task(‘html’,function(){
Gulp.src(folder.src+’html/*’)
	.pipe(folder.dist+’html/’)
})

創建了html任務，但是頁面加載的時候默認執行的是default任務，然後將html任務放置到任務隊列的後面。
Gulp.task(‘default’,gulp.series(‘html’));
注意: gulp4版本之後，default右邊的兩個參數需要放在gulp.series()的參數中。

此時還是有報錯，提示‘html’ errored after 6.34ms TypeError:dest.on is not a function at DestroyableTransform.Readable.pipe
Gulp.pipe(‘路徑’)，這樣是不能處理任務的，需要通過gulp.dest(‘路徑’)的方式處理

Gulp4版本之後，如果要在頁面加載時處理多個任務，則需要通過gulp.parallel(‘’,’’,’’)的方式進行處理。

壓縮文件

Gulp-htmlclean 下載壓縮插件 npm install gulp-htmlclean --save-dev
或者使用淘寶鏡像進行處理 cnpm install gulp-htmlclean –save-dev
插件下載完成後，調用插件的方法如下：
Var htmlclean = require(‘gulp-htmlclean’);
在文件導出之前需要進行壓縮，通過pipe的方式進行壓縮

壓縮圖片

有單獨的壓縮插件 gulp-imagemin
下載插件 npm install gulp-imagemin –save-dev
使用淘寶鏡像 cnpm install gulp-imagemin –sace-dev
使用插件的用法如下：
Var imagemin = require(‘gulp-imagemin’);
Imagemin();圖片壓縮執行函數

壓縮js的插件

Gulp-uglify 壓縮js文件
下載插件 npm install gulp-uglify –save-dev
使用淘寶鏡像 cnpm install gulp-uglify –save-dev
使用插件的用法如下：
Var uglify = require(‘gulp-uglify’);

去掉js中的調試語句

Gulp-strip-debug
下載插件 npm install gulp-strip-debug –save-dev
使用淘寶鏡像 cnpm install gulp-strip-debug –save-dev
使用插件的用法如下：
Var debug = require(‘gulp-strip-debug’);
去掉js中的調試語句，然後再進行壓縮。

將less轉化成css

Gulp-less
下載插件 npm install gulp-less –save-dev
使用淘寶鏡像 cnpm install gulp-less –save-dev
使用插件的用法如下：
Var less = require(‘gulp-less’);

壓縮css

Gulp-clean-css
下載插件 npm install gulp-clean-css –save-dev
使用淘寶鏡像 cnpm install gulp-clean-css –save-dev
使用插件的用法如下：
Var cleancss = require(‘gulp-clean-css’);

給css3屬性添加前綴

Gulp-postcss autoprefixer
下載插件 npm install gulp-postcss autoprefixer –save-dev
使用淘寶鏡像 cnpm install gulp-postcss autoprefixer –save-dev
使用插件的用法如下：
Var postcss = require(‘gulp-postcss’);
Var autopre = require(‘autoprefixer’);
使用的時候，autopre執行的結果要以數組的形式作爲postcss的參數進行傳遞

開啓服務器

Gulp-connect

設置開發或者生產環境

Export NODE_ENV=development

var gulp = require("gulp");
var imagemin = require("gulp-imagemin")
var htmlclean = require("gulp-htmlclean");
var uglify = require("gulp-uglify");
var stripDebug = require("gulp-strip-debug");
var concat = require("gulp-concat");
var deporder = require("gulp-deporder");
var less = require("gulp-less");

var postcss = require("gulp-postcss");
var autoprefixer = require("autoprefixer");
var cssnano = require("cssnano");
var connect = require("gulp-connect");


var folder = {
    src : "src/",
    dist : "dist/"
}

var devMode = process.env.NODE_ENV !== "production";

//流操作 task running
gulp.task("html",function(){
    var page =  gulp.src(folder.src + "html/index.html")
                    .pipe(connect.reload());
    if(!devMode){
        page.pipe(htmlclean());
    }
    page.pipe(gulp.dest(folder.dist + "html/"))
})

gulp.task("images",function(){
    gulp.src(folder.src + "images/*")
        .pipe(imagemin())
        .pipe(gulp.dest(folder.dist+"images/"))
})
gulp.task("js",function(){
    var js = gulp.src(folder.src+"js/*")
            .pipe(connect.reload());
    if(!devMode){
        js.pipe(uglify())
        .pipe(stripDebug())
    }   
    js.pipe(gulp.dest(folder.dist+"js/"))
})
gulp.task("css",function(){
    var css = gulp.src(folder.src+"css/*")
                .pipe(connect.reload())
                .pipe(less());
    var options = [autoprefixer()];
    if(!devMode){
        options.push(cssnano())
    }
        
    css.pipe(postcss(options))
    .pipe(gulp.dest(folder.dist + "css/"))
})
gulp.task("watch",function(){
    gulp.watch(folder.src + "html/*",["html"]);
    gulp.watch(folder.src + "images/*",["images"]);
    gulp.watch(folder.src + "js/*",["js"]);
    gulp.watch(folder.src + "css/*",["css"]);
})
gulp.task("server",function(){
    connect.server({
        port : "9900",
        livereload : true,
        // root:'./dist'
    });
})

gulp.task("default",["html","images","js","css","watch","server"]);

執行的時候，可以在當前目錄下，執行gulp即可。