gulp自动化构建

自己写的gulp-pro项目介绍如下:

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

2.各模块作用

minifycss // CSS压缩
uglify // js压缩
concat // 合并文件
rename// 重命名
clean //清空文件夹
minhtml //html压缩
jshint//js代码规范性检查
imagemin //图片压缩
browserSync //构建本地服务器并带有刷新功能
del //删除文件
gulpSequence //同步任务

构建说明:

合并压缩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')); 
 });

监控文件变化

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'] );
 });

本地服务器

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"
  }
}