gulp的gulpfile.js的配置文件

2016-04-20 16:19:36
这两天一直在弄gulp, 感觉太爽了, 简直是大爆发呀。不但能管理版本, 还能编译sass,压缩css, 压缩js,拼接js文件(减少http请求), 然后下面是我配置的gulpfile.js文件。 


var gulp = require('gulp'), //本地安装gulp所用到的地方
        sass = require('gulp-sass'),
        autoprefixer = require('gulp-autoprefixer'),
        cssmin = require('gulp-minify-css'),
        uglify = require('gulp-uglify'), //使用gulp-uglify压缩javascript文件,减小文件大小
        imagemin = require('gulp-imagemin'),
        pngquant = require('imagemin-pngquant'),
        cache = require('gulp-cache'),
        rename = require('gulp-rename'),
        concat = require('gulp-concat'), //使用gulp-concat合并javascript文件,减少网络请求
        notify = require('gulp-notify'),
        livereload = require('gulp-livereload'), //gulp-livereload拯救F5!当监听文件发生变化时,浏览器自动刷新页面。【事实上也不全是完全刷新,例如修改css的时候,不是整个页面刷新,而是将修改的样式植入浏览器,非常方便。】特别是引用外部资源时,刷新整个页面真是费时费力(需要配合浏览器插件使用)
        htmlmin = require('gulp-htmlmin'), //使用gulp-htmlmin压缩html,可以压缩页面javascript、css,去除页面空格、注释,删除多余属性等操作
        del = require('del'),
        rev = require('gulp-rev-append'); //版本控制器
//定义一个testLess任务(自定义任务名称)
gulp.task('styles', function() {
        gulp.src('src/**/*.scss') //该任务针对的文件
                .pipe(sass({
                        style: 'expanded',
                })) //该任务调用的模块
                .pipe(autoprefixer({
                        browsers: ['last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', , 'Android >= 4.0'],
                        cascade: true, //是否美化属性值 默认:true 像这样:
                        //-webkit-transform: rotate(45deg);
                        //        transform: rotate(45deg);
                        remove: true //是否去掉不必要的前缀 默认:true
                }))
                .pipe(gulp.dest('dist/')) //将会在src/css下生成index.css
                .pipe(rename({
                        suffix: '.min'
                })) //重命名为min
                .pipe(cssmin()) //压缩css文件
                .pipe(gulp.dest('dist/'))
                .pipe(notify({
                        message: 'Styles task complete'
                }));
});
gulp.task('default', ['style', 'elseTask']); //定义默认任务
// Scripts
gulp.task('js', function() {
        return gulp.src('src/**/*.js')
                //.pipe(jshint('.jshintrc'))
                //.pipe(jshint.reporter('default'))
                .pipe(concat('main.js')) //合并后的文件名
                .pipe(gulp.dest('dist/js'))
                .pipe(uglify({ //使用gulp-uglify压缩javascript文件,减小文件大小
                        mangle: true, //类型:Boolean 默认:true 是否修改变量名
                        compress: true, //类型:Boolean 默认:true 是否完全压缩
                        mangle: {
                                except: ['require', 'exports', 'module', '$']
                        } //排除混淆关键字
                }))
                .pipe(concat('main.js')) //合并后的文件名
                .pipe(rename({
                        suffix: '.min'
                }))
                .pipe(gulp.dest('dist/js'))
                .pipe(notify({
                        message: 'Scripts task complete'
                }));
});
//html
gulp.task('html', function() {
        var options = {
                removeComments: true, //清除HTML注释
                collapseWhitespace: true, //压缩HTML
                collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
                removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
                removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
                removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
                minifyJS: true, //压缩页面JS
                minifyCSS: true //压缩页面CSS
        };
        gulp.src('src/html/*.html')
                .pipe(rev()) //版本控制
                .pipe(gulp.dest('dist/html'));
        .pipe(htmlmin(options)) //压缩html文件
                .pipe(gulp.dest('dist/html'));
});
//images
gulp.task('img', function() {
        gulp.src('src/img/*.{png,jpg,gif,ico,jpeg}')
                .pipe(imagemin({
                        optimizationLevel: 7, //类型:Number  默认:3  取值范围:0-7(优化等级)
                        progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
                        interlaced: true, //类型:Boolean 默认:false 隔行扫描gif进行渲染
                        multipass: true, //类型:Boolean 默认:false 多次优化svg直到完全优化
                        progressive: true,
                        svgoPlugins: [{
                                removeViewBox: false
                        }], //不要移除svg的viewbox属性
                        use: [pngquant()] //使用pngquant深度压缩png图片的imagemin插件
                }))
                .pipe(rename({
                        suffix: '.min'
                }))
                .pipe(gulp.dest('dist/min'));
});
// Watch
gulp.task('watch', function() {
        // Watch .scss files
        gulp.watch('src/**/*.scss', ['styles']);
        // Watch .js files
        gulp.watch('src/**/*.js', ['scripts']);
        // Watch image files
        gulp.watch('src/**/*', ['images']);
        // Create LiveReload server
        livereload.listen();
        // Watch any files in dist/, reload on change
        gulp.watch(['dist/**']).on('change', livereload.changed);
});
编译之后,的目录结构是这样, 亲测,可运行

关于

联系方式 :

mail: hey_cool@163.com ,
QQ:583459700

备案许可证编号:蜀ICP备16005545号-1 © COPYRIGHT 2015-2024 zhmzjl.com | by: KAPO