gulp安裝及配置

時間 2019-11-12

原文原文鏈接

1gulp安裝javascript

安裝gulp，我通常會選擇局部安裝css

cmd窗口，cd到你的項目路徑，而後鍵入如下代碼html

npm install gulp --save-dev

2選擇gulp組件前端

前端項目須要的功能：
一、圖片（壓縮圖片支持jpg、png、gif）
二、樣式（支持sass 同時支持合併、壓縮、重命名）
三、javascript （檢查、合併、壓縮、重命名）
四、html （壓縮）
五、客戶端同步刷新顯示修改
六、構建項目前清除發佈環境下的文件（保持發佈環境的清潔）java

經過gulp plugins，尋找對於的gulp組件node

browser-sync: 靜態文件服務器，同時也支持瀏覽器自動刷新
gulp-autoprefixer: 補全瀏覽器兼容的css
gulp-clean: 清空文件夾
gulp-concat: 合併文件
gulp-csslint: 檢查css
gulp-eslint: 檢查js
gulp-htmlhint: 檢查html
gulp-imagemin: 壓縮圖片
gulp-minify-css: 壓縮css
gulp-rename: 重命名文件
gulp-rev-easy: 添加版本號
gulp-ruby-sass: 支持sass
gulp-sourcemaps: 處理JS時，生成SourceMap
gulp-uglify: 壓縮js
run-sequence: 讓gulp任務，能夠相互獨立，解除任務間的依賴，加強task複用
gulp-htmlmin: 壓縮htmlgit

3安裝gulp組件github

安裝組件項目目錄，經過cd project 進入目錄，執行下邊的npm安裝組件。npm

npm install browser-sync gulp-autoprefixer gulp-clean gulp-concat gulp-csslint gulp-eslint gulp-htmlhint gulp-imagemin gulp-minify-css gulp-rename gulp-rev-easy gulp-ruby-sass gulp-sourcemaps gulp-uglify gulp-util run-sequence --save-dev

4項目目錄結構gulp

5編寫gulp任務

// 引入 gulp及組件
var gulp = require('gulp'), //基礎庫
    imagemin = require('gulp-imagemin'), //圖片壓縮
    sass = require('gulp-ruby-sass'), //sass預處理維css
    autoprefixer = require('gulp-autoprefixer'), //自動補全前綴
    sourcemaps = require('gulp-sourcemaps'), //處理JS時，生成SourceMap
    minifycss = require('gulp-minify-css'), //css壓縮
    htmlhint = require('gulp-htmlhint'), //html檢查
    csslint = require('gulp-csslint'), //css檢查
    eslint = require('gulp-eslint'), //js檢查
    uglify = require('gulp-uglify'), //js壓縮
    htmlmin = require('gulp-htmlmin'), //壓縮html
    rename = require('gulp-rename'), //重命名
    concat = require('gulp-concat'), //合併文件
    clean = require('gulp-clean'), //清空文件夾
    reveasy = require('gulp-rev-easy'), //添加版本號
    runSequence = require('run-sequence'), //順序執行任務
    browserSync = require('browser-sync'); //靜態文件服務器，同時也支持瀏覽器自動刷新

// HTML處理
gulp.task('html', function() {
    var htmlSrc = './src/*.html',
        htmlDst = './dist/';

    gulp.src(htmlSrc)
        .pipe(htmlhint())
        .pipe(htmlhint.failReporter())
        .pipe(gulp.dest(htmlDst))
        .pipe(reveasy()) //加上版本號
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest(htmlDst))
});

// 樣式處理
gulp.task('css', function() {
    var cssSrc = './src/scss/*.scss',
        cssDst = './dist/css';

    return sass(cssSrc, { style: 'expanded', sourcemap: true })
        .on('error', sass.logError)
        .pipe(autoprefixer({
            browsers: ['> 1%', 'IE 8'],
            cascade: false
        }))
        .pipe(csslint())
        .pipe(csslint.reporter())
        .pipe(sourcemaps.write())
        .pipe(sourcemaps.write('maps', {
            includeContent: false,
            sourceRoot: './src/scss'
        }))
        .pipe(gulp.dest(cssDst))
        .pipe(rename({ suffix: '.min' }))
        .pipe(minifycss())
        .pipe(gulp.dest(cssDst));
});

// 圖片處理
gulp.task('images', function() {
    var imgSrc = './src/images/**/*',
        imgDst = './dist/images';
    gulp.src(imgSrc)
        .pipe(imagemin())
        .pipe(gulp.dest(imgDst));
})

// js處理
gulp.task('js', function() {
    var mainSrc = './src/js/main.js',
        mainDst = './dist/js/',
        appSrc = './src/js/vendor/*.js',
        appDst = './dist/js/vendor/';

    gulp.src(mainSrc)
        //.pipe(concat('main.js'))
        //.pipe(gulp.dest(jsDst))
        //.pipe(rename({ suffix: '.min' }))
        .pipe(eslint())
        .pipe(eslint.format())
        // .pipe(eslint.failAfterError())
        .pipe(uglify())
        .pipe(concat("main.js"))
        .pipe(gulp.dest(mainDst));

    gulp.src(appSrc)
        .pipe(uglify())
        //.pipe(concat("vendor.js"))
        .pipe(gulp.dest(appDst));
});

// 入口點
gulp.task('default', function() {
    runSequence(
        ['clean'], ['copy'], ['server']
    );
});

// 清空圖片、樣式、js
gulp.task('clean', function() {
    gulp.src(['./dist/css', './dist/js/main.js', './dist/js/vendor', './dist/images'], { read: false })
        .pipe(clean());
});

// 重建圖片、樣式、js
gulp.task('copy', function() {
    // gulp.start('css', 'js', 'images', 'html');
    runSequence(
        ['css'],['js'], ['html']
    );
});

// 監放任務 運行語句 gulp watch
gulp.task('watch', function() {

    // 監聽html
    gulp.watch('./src/*.html', function(event) {
        gulp.run('html');
    });

    // 監聽css
    gulp.watch('./src/scss/*.scss', function() {
        gulp.run('css');
    });

    // 監聽images
    gulp.watch('./src/images/**/*', function() {
        gulp.run('images');
    });

    // 監聽js
    gulp.watch(['./src/js/main.js', './src/js/vendor/*.js'], function() {
        gulp.run('js');
    });
});

// 啓動預覽服務單獨版本
gulp.task('server', function() {
    browserSync({
        notify: true,
        logPrefix: 'sw',
        server: 'dist'
    });
    gulp.watch(['dist/**/*'], browserSync.reload);
});

6訪問

進入項目路徑，而後輸入，便可訪問localhost:8080