gulp的使用介紹及技巧

時間 2019-11-21

原文原文鏈接

一、安裝全局gulpjavascript

npm install --global gulp

二、開發依賴安裝css

npm install --save-dev gulp

三、項目根目錄建立名爲gulpfile.js文件(如下爲我的收集整理，可借鑑使用)html

var gulp = require('gulp'), //獲取gulp
    htmlmin = require("gulp-htmlmin"), //壓縮頁面javascript、css，去除頁面空格、註釋，刪除多餘屬性等操做
    imagemin = require("gulp-imagemin"), //壓縮圖片文件
    cache = require('gulp-cache'), //只壓縮修改的圖片
    pngquant = require('imagemin-pngquant'), //深度壓縮圖片
    less = require("gulp-less"), //將less文件編譯成css
    sourcemaps = require('gulp-sourcemaps'), //生成sourcemap文件
    cssFormat = require('gulp-css-format'), //格式化css文件
    cssmin = require("gulp-clean-css"), //壓縮css文件
    uglify = require("gulp-uglify"), //壓縮javascript文件
    concat = require("gulp-concat"), //合併javascript文件，減小網絡請求
    rev = require("gulp-rev-append"), //引用添加版本號，清除頁面引用緩存
    autoprefixer = require("gulp-autoprefixer"), //自動處理瀏覽器前綴
    livereload = require("gulp-livereload"); //監聽文件發生變化時，瀏覽器自動刷新頁面

//定義testHtmlmin任務
gulp.task('testHtmlmin', function () {
    //htmlmin參數
    var options = {
        removeComments: true, //清除HTML註釋
        collapseWhitespace: true, //壓縮HTML
        collapseBooleanAttributes: true, //省略布爾屬性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true, //刪除全部空格做屬性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true, //刪除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true, //刪除<style>和<link>的type="text/css"
        minifyJS: true, //壓縮頁面JS
        minifyCSS: true //壓縮頁面CSS
    };
    gulp.src('*.html') //該任務針對的源文件
        .pipe(htmlmin(options)) //該任務調用的模塊
        .pipe(gulp.dest('')); //該任務輸出的位置
});

//定義testImagemin任務
gulp.task('testImagemin', function () {
    //imagemin參數
    var options = {
        optimizationLevel: 5, //類型：Number  默認：3  取值範圍：0-7（優化等級）
        progressive: true, //類型：Boolean 默認：false 無損壓縮jpg圖片
        interlaced: true, //類型：Boolean 默認：false 隔行掃描gif進行渲染
        multipass: true, //類型：Boolean 默認：false 屢次優化svg直到徹底優化
        use: [pngquant()] //使用pngquant深度壓縮png圖片的imagemin插件
    };
    gulp.src('*.{png,jpg,gif,ico}') //該任務針對的源文件
        .pipe(imagemin(options)) //該任務調用的模塊
        .pipe(cache(imagemin(options))) //只壓縮修改的圖片
        .pipe(gulp.dest('')); //該任務輸出的位置
});

//定義testLess任務
gulp.task('testLess', function () {
    //cssmin參數
    var options = {
        advanced: false, //類型：Boolean 默認：true [是否開啓高級優化（合併選擇器等）]
        compatibility: 'ie7', //保留ie7及如下兼容寫法 類型：String 默認：''or'*' [啓用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
        keepBreaks: true, //類型：Boolean 默認：false [是否保留換行]
        keepSpecialComments: '*' //保留全部特殊前綴 當你用autoprefixer生成的瀏覽器前綴，若是不加這個參數，有可能將會刪除你的部分前綴
    };
    //編譯src目錄下的全部less文件
    //除了reset.less和test.less（**匹配src/less的0個或多個子文件夾）
    gulp.src(['src/less/*.less', '!src/less/**/{reset,test}.less']) //該任務針對的源文件
        .pipe(sourcemaps.init()) //該任務調用的模塊
        .pipe(less())
        .pipe(sourcemaps.write())
        .pipe(cssmin(options)) //兼容IE7及如下需設置compatibility屬性 .pipe(cssmin({compatibility: 'ie7'}))
        .pipe(livereload())　　.pipe(gulp.dest('')); //該任務輸出的位置
});

//定義testJs任務
gulp.task('testJs', function () {
    //uglify參數
    var options = {
        mangle: true, //類型：Boolean 默認：true 是否修改變量名
        compress: true, //類型：Boolean 默認：true 是否徹底壓縮
        preserveComments: 'all', //保留全部註釋
        mangle: {
            except: ['require', 'exports', 'module', '$']
        } //排除混淆關鍵字
    };
    //多個文件以數組形式傳入
    //gulp.src(['src/js/index.js','src/js/detail.js']) //該任務針對的源文件
    //壓縮src/js目錄下的全部js文件
    //除了test1.js和test2.js（**匹配src/js的0個或多個子文件夾）
    gulp.src(['src/js/*.js', '!src/js/**/{test1,test2}.js'])
        .pipe(uglify(options)) //該任務調用的模塊
        .pipe(concat('bundle.js')) //合併後的文件名
        .pipe(gulp.dest('')); //該任務輸出的位置
});

//定義testRev任務
//html模板
// <!doctype html>
// <html>
//   <head>
//     <link rel="stylesheet" href="css/style.css?rev=@@hash">
//     <script src="js/js-one.js?rev=@@hash"></script>
//     <script src="js/js-two.js"></script>
//   </head>
//   <body>
//     <div>hello, world!</div>
//     <img src="img/test.jpg?rev=@@hash" alt="" />
//     <script src="js/js-three.js?rev=@@hash"></script>
//   </body>
// </html>
gulp.task('testRev', function () {
    gulp.src('name.html') //該任務針對的源文件
        .pipe(rev()) //該任務調用的模塊
        .pipe(gulp.dest('')); //該任務輸出的位置
});

//定義testAutoFx任務
gulp.task('testAutoFx', function () {
    //autoprefixer參數
    var options = {
        browsers: ['last 2 versions', 'Android >= 4.0'], //https://github.com/ai/browserslist#queries
        cascade: true, //是否美化屬性值 默認：true 像這樣：-webkit-transform: rotate(45deg);        transform: rotate(45deg);
        remove: true //是否去掉沒必要要的前綴 默認：true
    };
    gulp.src('name.css') //該任務針對的源文件
        .pipe(autoprefixer(options)) //該任務調用的模塊
        .pipe(gulp.dest('')); //該任務輸出的位置
});
//定義cssformat任務
gulp.task('cssformat', function () {
    //cssFormat參數
    var options = {
        indent: 1, //設置選擇器和聲明之間的縮進，默認：0
        hasSpace: true //屬性和值之間插入一個空格,默認：false
    };
    gulp.src('base.css') //該任務針對的源文件
        .pipe(cssFormat(options))
        .pipe(gulp.dest('')); //該任務輸出的位置
})

//在命令行gulp auto啓動此任務
gulp.task('auto', function () {
    livereload.listen();
    //監聽文件修改，當文件修改則執行less任務,任務可多個
    gulp.watch('views/less/**.less', ['less'])
})

//使用gulp.task('default')定義默認任務
//在命令行使用gulp啓動後面任務
gulp.task('default', ['testHtmlmin', 'testImagemin', 'testLess', 'testJs', 'testRev', 'testAutoFx', 'cssformat'])