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、基本使用

vargulp=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文件

vargulp=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、匹配符“!”，“*”，“**”，“{}”

vargulp=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、指定变量名不混淆改变

vargulp=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其他参数 具体参看

vargulp=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