自己寫的gulp-pro項(xiàng)目介紹如下:

1.gulp.js的核心部分在gulpfile.js配置文件,可以在 這里查看文件代碼。

2.各模塊作用

minifycss // CSS壓縮
uglify // js壓縮
concat // 合并文件
rename// 重命名
clean //清空文件夾
minhtml //html壓縮
jshint//js代碼規(guī)范性檢查
imagemin //圖片壓縮
browserSync //構(gòu)建本地服務(wù)器并帶有刷新功能
del //刪除文件
gulpSequence //同步任務(wù)

構(gòu)建說明:

合并壓縮html文件

壓縮html
gulp.task('html', function() {
        gulp.src('./*.html')
        .pipe(minhtml({collapseWhitespace: true}))
        .pipe(gulp.dest('dist'))
        .pipe ( browserSync.reload ( {
         stream : true
     }));
 });

合并壓縮css文件

壓縮css
gulp.task('css', function() {
     gulp.src ( './css/**/*.css' )
        .pipe(concat('merge.min.css')) 
        .pipe(minifycss()) 
        .pipe(gulp.dest('dist/css/'))
         .pipe ( browserSync.reload ( {
             stream : true
     }));
 }); 

合并壓縮js文件

壓縮js
gulp.task('js', function() {
    gulp.src ( './js/**/*.js' )
        .pipe(jshint()) 
        .pipe(jshint.reporter('default')) 
        .pipe(concat('merge.min.js')) 
        .pipe(uglify()) 
        .pipe(gulp.dest('dist/js/'))
        .pipe ( browserSync.reload ( {
            stream : true
        }));
 }); 

合并壓縮img文件

壓縮img
gulp.task('img', function(){
     gulp.src ( './img/**/*.{png,jpg,gif,ico}' )
        .pipe(imagemin()) 
         .pipe(gulp.dest('dist/img')); 
 });

監(jiān)控文件變化

gulp.task ( 'watch' , function () {
    gulp.watch ( './css/**/*.css' , ['css'] );
    gulp.watch ( './index.html' , ['html'] );
    gulp.watch ( './img/**/*.{png,jpg,gif,ico}' , ['img'] );
    gulp.watch ( './js/**/*.js' , ['js'] );
 });

本地服務(wù)器

gulp.task ( 'dev:server' , function () {
     browserSync.init ( {
        startPath : '/' ,
        server    : {
            baseDir : "./dist/"
        } ,
         port : 5000
    });
 });

我們在package.json中寫入了：

{
  "name": "gul-pro",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.18.8",
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-clean": "^0.3.2",
    "gulp-concat": "^2.6.1",
    "gulp-copy": "^1.0.0",
    "gulp-htmlmin": "^3.0.0",
    "gulp-imagemin": "^3.1.1",
    "gulp-jshint": "^2.0.4",
    "gulp-less": "^3.3.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-rename": "^1.2.2",
    "gulp-sequence": "^0.4.6",
    "gulp-uglify": "^2.1.0",
    "jshint": "^2.9.4",
    "run-sequence": "^1.2.2"
  }
}