構建gulp執行任務

// 定義web服務模塊,增長瀏覽器同步瀏覽
gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: '.'
        }
    });
});

// 建立Compass任務,編譯Sass生成雪碧圖
gulp.task('compass', function() {
    gulp.src(path.dev.sass+'/*.scss')
        .pipe(compass({
            config_file: './config.rb',    // 配置文件
            css: path.dev.css,             // 編譯路徑
            sass: path.dev.sass           // sass路徑
            //image: path.dev.image        // 圖片路徑,用於生成雪碧圖
        }))
        .pipe(cssver())                    // CSS文件引用URl加版本號
        .pipe(minifycss())                 // 壓縮CSS
        .pipe(gulp.dest(path.dist.css))    // 發佈到線上版本
        .pipe(reload({stream: true}));
});

// 壓縮HTML
gulp.task('html', function() {
    gulp.src(path.dev.html+"/*.html")
        .pipe(rev())                    // html 引用文件添加版本號
        .pipe(gulp.dest(path.dist.html))
        .pipe(reload({stream: true}));
});

//檢查腳本
gulp.task('lint', function() {
    gulp.src(path.dev.js+'/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});// 圖片壓縮
gulp.task('image', function() {
    gulp.src(path.dev.image+'/*.*')
        .pipe(cache(imagemin()))
        .pipe(reload({stream: true}))
        .pipe(gulp.dest(path.dist.image));
        //.pipe(notify({ message: '圖片壓縮'}));
});

// 合併壓縮JS文件
gulp.task('script', function() {
    gulp.src(path.dev.js+'/*.js')
        //.pipe(concat('all.js'))            // 合併
        //.pipe(gulp.dest(path.dist.js))
        //.pipe(rename('all.min.js'))        // 重命名
        .pipe(uglify())                    // 壓縮
        .pipe(gulp.dest(path.dist.js))
        //.pipe(notify({ message: 'JS合併壓縮' }))
        .pipe(reload({stream: true}));
});

// 清空文件夾
gulp.task('clean', function() {
    gulp.src([path.dist.css, path.dist.js, path.dist.image], {read: false})
        .pipe(clean());
});

// 默認任務
gulp.task("default", function() {
    gulp.run('browser-sync', 'lint', 'compass', 'script', 'image');

    // 檢測文件發送變化 - 分開監聽爲了執行對應的命令
    gulp.watch(path.dev.html+'/*.*', ['html']);
    gulp.watch(path.dev.sass+'/*.scss', ['compass']);
    gulp.watch(path.dev.image+'/**', ['image']);
    gulp.watch(path.dev.js+'/*.js', ['lint', 'script']);

});

 

https://www.cnblogs.com/morong/p/4469637.htmlcss

相關文章
相關標籤/搜索