gulp文件实例，自动化环境搭建实例，自动化，gulp自动化，gulp教程

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');
var minifycss = require('gulp-minify-css');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var del = require('del');
var gulp        = require('gulp');
var htmlmin     = require('gulp-htmlmin');
var autoprefixer = require('gulp-autoprefixer');
var plumber     =require('gulp-plumber');
var reload      = browserSync.reload;
 




// 静态服务器 + 监听 scss/html 文件
var bs;
gulp.task('serve', ['minifyCss','minifyjs','html'], function() {


    bs= browserSync.init({
        server: "./app",
        startPath: 'web/index.html'
    });
    gulp.watch(["dist/scss/*.scss"], ['minifyCss']);
    gulp.watch(["dist/js/*.js"], ['js-watch']);
    gulp.watch("dist/web/*.html", ['html-watch']);
});






//压缩css
gulp.task('minifyCss', ['cleanCss','autop'] ,function() {
    return gulp.src('dist/css/index.css')      //压缩的文件
        .pipe(plumber())
        .pipe(minifycss())   //执行压缩
        .pipe(gulp.dest('app/css'))   //输出文件夹
        .pipe(reload({stream: true}));
});


//加前缀
gulp.task('autop',['sass'], function () {
    return gulp.src('dist/css/*.css')
    .pipe(plumber())
    .pipe(autoprefixer({
        browsers: ['Android >= 4.0','iOS >= 7.0','ie >=9','last 3 Opera versions','last 3 bb versions','last 3 ff versions','last 3 op_mob versions','last 3 op_mini versions','last 3 and_chr versions','last 3 and_ff versions','last 3 ie_mob versions','last 3 Safari versions'],
        cascade: false, //是否美化属性值 默认：true 像这样：
        //-webkit-transform: rotate(45deg);
        //        transform: rotate(45deg);
        remove:false //是否去掉不必要的前缀 默认：true 
    }))
    .pipe(gulp.dest('dist/css'));
});


// scss编译后的css将注入到浏览器里实现更新
gulp.task('sass', function() {
    return gulp.src("dist/scss/*.scss")
        .pipe(plumber())
        .pipe(sass())
        .pipe(gulp.dest("dist/css"))
});




//压缩js
gulp.task('minifyjs', ['cleanJs'],function() {
    return gulp.src(['dist/js/jquery-1.12.3.js','dist/js/index.js'])
        .pipe(plumber())
        .pipe(concat('main.js'))    //合并所有js到main.js
        //.pipe(gulp.dest('dist/js'))    //输出main.js到文件夹
        .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名
        .pipe(uglify())    //压缩
        .pipe(gulp.dest('app/js'))  //输出
});




gulp.task('js-watch', ['minifyjs'], browserSync.reload );


gulp.task('js-watch', ['minifyjs'],function(){
    browserSync.reload();  
});


//压缩html
gulp.task('html',['cleanHtml'], function(){
    var options = {
        collapseWhitespace:true,
        collapseBooleanAttributes:true,
        removeComments:true,
        removeEmptyAttributes:true,
        removeScriptTypeAttributes:true,
        removeStyleLinkTypeAttributes:true,
        minifyJS:true,
        minifyCSS:true
    };
    return  gulp.src('dist/web/*.html')
            .pipe(plumber())
            .pipe(htmlmin(options))
            .pipe(gulp.dest('app/web'))
});


gulp.task('html-watch', ['html'],function(){
    browserSync.reload();  
});


//执行压缩前，先删除文件夹里的内容
gulp.task('cleanJs', function(cb) {
    return del(['app/js'], cb)
});


gulp.task('cleanCss', function(cb) {
    return del(['app/css'], cb)
});


gulp.task('cleanHtml', function(cb) {
    return del(['app/web'], cb)
});




//清楚文件夹完了，开始执行这里
// gulp.task('oStart', ['clean'], function() {
//     return gulp.start('minifycss', 'minifyjs');
// });




//默认命令，在cmd中输入gulp后，执行的就是这个命令

gulp.task('default', ['serve']);

二.下面详细介绍js压缩

1、安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件

1.2、本示例目录结构如下：

2、本地安装gulp-uglify

2.1、github

2.2、安装：命令提示符执行 cnpm install gulp-uglify --save-dev

2.3、注意：没有安装cnpm请使用 npm install gulp-uglify --save-dev。 

2.4、说明：--save-dev 保存配置信息至 package.json 的 devDependencies 节点。

3、配置gulpfile.js

3.1、基本使用

var gulp = require ( 'gulp' ) ,

     uglify = require ( 'gulp-uglify' ) ;

 

gulp . task ( 'jsmin' , function ( ) {

     gulp . src ( 'src/js/index.js' )

         . pipe ( uglify ( ) )

         . pipe ( gulp . dest ( 'dist/js' ) ) ;

} ) ;

3.2、压缩多个js文件

var gulp = require ( 'gulp' ) ,

     uglify = require ( 'gulp-uglify' ) ;

 

gulp . task ( 'jsmin' , function ( ) {

     gulp . src ( [ 'src/js/index.js' , 'src/js/detail.js' ] ) //多个文件以数组形式传入

         . pipe ( uglify ( ) )

         . pipe ( gulp . dest ( 'dist/js' ) ) ;

} ) ;

3.3、匹配符“!”，“*”，“**”，“{}”

var gulp = require ( 'gulp' ) ,

     uglify = require ( 'gulp-uglify' ) ;

 

gulp . task ( 'jsmin' , function ( ) {

     //压缩src/js目录下的所有js文件

     //除了test1.js和test2.js（**匹配src/js的0个或多个子文件夹）

     gulp . src ( [ 'src/js/*.js' , '!src/js/**/{test1,test2}.js' ] )

         . pipe ( uglify ( ) )

         . pipe ( gulp . dest ( 'dist/js' ) ) ;

} ) ;

3.4、指定变量名不混淆改变

var gulp = require ( 'gulp' ) ,

     uglify = require ( 'gulp-uglify' ) ;

 

gulp . task ( 'jsmin' , function ( ) {

     gulp . src ( [ 'src/js/*.js' , '!src/js/**/{test1,test2}.js' ] )

         . pipe ( uglify ( {

             //mangle: true,//类型：Boolean 默认：true 是否修改变量名

             mangle : { except : [ 'require' , 'exports' , 'module' , '$' ] } //排除混淆关键字

         } ) )

         . pipe ( gulp . dest ( 'dist/js' ) ) ;

} ) ;

3.5、gulp-uglify其他参数 具体参看

var gulp = require ( 'gulp' ) ,

     uglify = require ( 'gulp-uglify' ) ;

 

gulp . task ( 'jsmin' , function ( ) {

     gulp . src ( [ 'src/js/*.js' , '!src/js/**/{test1,test2}.js' ] )

         . pipe ( uglify ( {

             mangle : true , //类型：Boolean 默认：true 是否修改变量名

             compress : true , //类型：Boolean 默认：true 是否完全压缩

             preserveComments : 'all' //保留所有注释

         } ) )

         . pipe ( gulp . dest ( 'dist/js' ) ) ;

} ) ;

4、执行任务

4.1、命令提示符执行：gulp jsmin