装置gulp

gulp引荐装置到项目目次，不引荐全局目次，由于后期gulp会自动引入项目相干的支撑包，假如全局装置gulp，这些支撑包全都装置在/usr/local/lib/node_modules/下，不利于治理，能够易引发争执。

npm install gulp

装置经常使用插件

// js紧缩
gulp-uglify
// css紧缩
gulp-clean-css
// 重命名
gulp-rename
// 兼并文件
gulp-concat
// 捕捉毛病
gulp-plumber
// 打包
gulp-zip
//过率console信息
gulp-strip-debug

在gulpfile.js中载入插件

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var plumber  = require('gulp-plumber');
var zip = require('gulp-zip');
var browserSync = require('browser-sync');

自动紧缩css重命名

定义一个使命compress-css,紧缩static文件夹下面的index.css,而且重命名为index.min.css,保存到build文件夹下面

gulp.task('compress-css', function() {
    gulp.src('static/index.css')
        .pipe(minifyCss())
        .pipe(rename('index.min.css')) 
        .pipe(gulp.dest('build'));
});

自动紧缩js代码而且重命名

定义一个使命compress-js,紧缩static文件夹下面的index.js,而且重命名为index.min.js,保存到build文件夹下面

gulp.task('compress-js', function() {
    gulp.src('static/index.js')
        .pipe(uglify())
        .pipe(rename('index.min.js')) 
        .pipe(gulp.dest('build'));
});

自动兼并文件

兼并src下面的js文件，重命名为all.js，保存在build文件夹下面

gulp.task('minify', function (){
     return gulp.src('src/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('build'))
});

实行某个使命

gulp teskname

看管文件变化

这里定义一个默许的使命，只需要在gulp内里输入gulp

gulp.task('default', function(){
    gulp.watch('src/*.*', function(){
        gulp.run('teakname')
    });
});

打包宣布使命

新建使命zip，将build文件夹下面的文件悉数打包为publish.zip,宣布到release文件夹下面

gulp.task('zip', function(){
    return gulp.src('build/*')
        .pipe(plumber())
        .pipe(zip('publish.zip'))
        .pipe(gulp.dest('release'))
});

自动革新浏览器

新建使命start，启用一个当地server，看管当前目次下的一切文件，一旦文件变化，浏览器reload

gulp.task('start', function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });

    gulp.watch('./*', function() {
        browserSync.reload();
    });
})

在build使命中过滤目的文件中的console.log();

var stripDebug = require('gulp-strip-debug');
gulp.task('build', function () {
        .gulp.src()
        .pipe(stripDebug())
        .pipe(gulp.dest());
});

监听gulp使命完毕,实行回调

gulp.task('dev', function(){
    gulp.src(src)
        .pipe(rename('app.js'))
        .on('end',function(){
           console.log('这里是回调')
        })

});