gulpfile

//在这里面写gulp的配置

// 基于task(任务)的

// 第一步，需要引入用到的插件

// 在引入插件的时候，require里面不需要放路径名字，只需要放上插件名

var gulp = require('gulp'); var concat = require('gulp-concat'); var clean = require('gulp-clean-css'); var rename = require('gulp-rename');

//压缩js var uglify = require('gulp-uglify');

//混淆js var obfuscate = require('gulp-obfuscate');

//开启服务器环境 var connect = require('gulp-connect');

//压缩图片 var imageMin = require('gulp-imagemin');

//postcss var postCss = require('gulp-postcss'); var autopre = require('gulp-autoprefixer');

// 注意，当你使用require来引入外部文件的时候，如果是引入的node_modules文件夹里面的文件，就不需要添加任何路径 // 如果你引入的是自定义的文件，一定要加上路径，如果是当前目录的，一定要加上./

// 第二步，就可以写相应的任务 //gulp.taks(任务名, function(){

//})

// gulp.src(放上的是源文件的路径)

//合并，压缩css gulp.task('MiniCss', function() { gulp.src('css/*.css')

//pipe管道的意思   指的是当前要做什么事情
.pipe(concat('app.css'))
    .pipe(autopre({
        browsers: ['> 5%', 'Firefox > 20', 'ie 6-8', '> 5% in US']
    }))
    .pipe(clean())
    .pipe(rename({
        extname: '.min.css'
    }))
    .pipe(gulp.dest('dist/'))
复制代码

});

//合并、压缩js的任务

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

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

.pipe(concat('app.js'))
    .pipe(obfuscate({ replaceMethod: obfuscate.ZALGO }))
    .pipe(uglify({
        mangle: {
            toplevel: true
        }
    }))
    .pipe(rename({
        extname: '.min.js'
    }))
    .pipe(gulp.dest('dist/'))
复制代码

});

// 用来设置开启服务器环境的任务 gulp.task('Server', function() { connect.server({ port: 4000, // 更改端口号的 直接放上你要的端口号 //host: '88.88.88.88' //设置访问地址的 //https: true livereload: true }); });

//用来监听文件的更改 gulp.task('watchFile', ['MiniCss', 'MiniJs'], function() {

gulp.watch('js/*.js', ['MiniJs']);
gulp.watch('css/*.css', ['MiniCss'])
复制代码

});

//压缩图片的任务 gulp.task('MiniImg', function() { gulp.src('img/*') .pipe(imageMin({ optimizationLevel: 1 })) .pipe(gulp.dest('dist/img/')) })

//在Gulp里面 有一个默认的任务名 default // 就是先执行中括号里面的任务，再执行default

gulp.task('default', ['Server', 'watchFile', 'MiniImg'])

转载于:https://juejin.im/post/5b6086abf265da0f491bb962