前端开发自动化之gulp

说明：该内容从我的博客转移过来（http://www.cnblogs.com/izgl/p/6433105.html）

前端开发自动化之gulp

---

在这里我们将用gulp来实现前端开发自动化,考虑到我们永远屹立的万里长城我们使用cnpm,同时本文内容以本人另一篇文章(http://www.cnblogs.com/izgl/p/6433105.html)为前提,请自行参考
　　在工程目录下打开cmd

       1.cnpm install gulp -g --save-dev     
       2.cnpm install gulp --save-dev    
       2.gulp -v  检测gulp有没有安装好    
       3.到package.json中观察 "devDependencies": {"gulp": "^3.9.1"}  这个代码有,代表配置成功    
       4. 到code下 建立一个gulpfile.js 文件    
       5. 再建立两个文件  分别命名为src 和 distribution    
       6  到src文件夹下 建立 index.html    
      7. 将src文件夹下的  index.html 复制到  distribution

环境的搭建需要安装以下功能插件以及安装命令行代码
　　1.压缩css

       cnpm i gulp-cssnano --save-v

2.压缩js

    cnpm i gulp-cancat --save-v

3.压缩html

    cnpm i gulp-htmlmin --save-v

4.混淆js

     cnpm i gulp-uglify --save-v

5.浏览器同步测试

  //先安装 cnpm install -g browser-sync cnpm i gulp-uglify --save-v //到src文件夹下 建立 index.html

6.实现浏览器自动同步需要如下js代码(位于gulpfile.js)

//将index.htmlcopy到distribution
var gulp = require('gulp');
gulp.task('copy', function() {
// 将你的默认的任务代码放在这
    gulp.src('src/index.html')
        .pipe(gulp.dest('distribution'))
        .pipe(browserSync.reload({
            stream:true
        }));
    gulp.src('src/css/*.css')
        .pipe(gulp.dest('distribution/css'))//把src/css里面css文件copy到distribution/css
    });

var gulp = require('gulp');
gulp.task('copyCss', function() {
// 将你的默认的任务代码放在这
    gulp.src('src/css/*.css')
        .pipe(gulp.dest('distribution/css'))//把src/css里面css文件copy到distribution/css
        .pipe(browserSync.reload({
        stream:true
    }));
});


//less转换成css 并且压缩
var less = require('gulp-less');
var cssnano = require('gulp-cssnano');
gulp.task('less',function () {
    return gulp.src('src/style/*.less')
        .pipe(less()) //less转换成css
        .pipe(cssnano()) //压缩css
        .pipe(gulp.dest('distribution/css')) //把css文件copy到distribution/css
        .pipe(gulp.dest('src/css'))//把css文件copy到src/css
        .pipe(browserSync.reload({
            stream:true
        }));
});


//压缩js并且混淆js
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
gulp.task('concat', function() {
    return gulp.src('src/js/*.js')
        .pipe(concat('all.js')) //压缩到目标文件
        .pipe(uglify())//混淆js
        .pipe(gulp.dest('distribution/js')) //把文件copy到distribution/js
        .pipe(browserSync.reload({
            stream:true
        }))
});


//压缩HTML
var htmlmin = require('gulp-htmlmin');
gulp.task('minify', function() {
    return gulp.src('src/*.html')
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(htmlmin({preserveLineBreaks: true}))
        .pipe(htmlmin({processConditionalComments: true}))
        .pipe(htmlmin({removeAttributeQuotes: true}))
        .pipe(htmlmin({removeComments: true}))
        .pipe(htmlmin({removeEmptyElements: true}))
        .pipe(htmlmin({removeScriptTypeAttributes: true}))
        .pipe(htmlmin({removeStyleLinkTypeAttributes: true}))
        .pipe(htmlmin({removeAttributeQuotes: true}))
        .pipe(gulp.dest('distribution'))
        .pipe(browserSync.reload({
        stream:true
    }))
});


//自动监听文件内容变化，实现开发流自动化
// gulp.task('auto',function () {
//     gulp.watch('src/css/*.css',['less']);
//     gulp.watch('src/js/*.js',['concat']);
//     gulp.watch('src/style/*.less',['less']);
//     gulp.watch('src/index.html',['minify']);
// });



// 代替上面“自动监听文件内容变化，实现开发流自动化”
var browserSync = require('browser-sync').create();
// Static server
gulp.task('serve', function() {
    browserSync.init({
        server: {
            baseDir: "./distribution"
        }
    });
    gulp.watch('src/css/*.css',['less']);
    gulp.watch('src/js/*.js',['concat']);
    gulp.watch('src/style/*.less',['less']);
    gulp.watch('src/css/*.css',['copyCss']);
    gulp.watch('src/index.html',['minify']);
});

7.cmd运行gulp.serve