您现在的位置:首页 >> 前端 >> 内容

gulp常用插件、gulp压缩CSS、gulp检查,压缩,合并JS

时间:2017/11/21 11:11:00 点击:

  核心提示:对于以下其中的src属性,是相对于gulpfile.js的路径!gulp常用插件:/*** npm 安装命令 npm install name --save-dev* gulp-concat合并文件*...

对于以下其中的src属性,是相对于gulpfile.js的路径!

gulp常用插件、gulp压缩CSS、gulp检查,压缩,合并JS

gulp常用插件:

/**

* npm 安装命令 npm install name --save-dev

* gulp-concat               合并文件

* browser-sync              自动刷新,静态服务

* gulp-load-plugins         自动加载gulp插件

* gulp-autoprefixer         设置浏览器版本自动处理浏览器前缀

* gulp-uglify               压缩js文件

* gulp-csso                 压缩优化css

* gulp-sass                 编译sass

* gulp-sourcemaps           生层map文件

* gulp-clean                删除文件

* gulp-sequence             让任务顺序执行【这个插件没有使用】

* gulp-htmlmin              压缩页面的html

* gulp-jshint               校验js语法     依赖 jshint

压缩CSS

// 压缩css

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

    return gulp.src('./development/css/frame.css')

               .pipe($.csso())

               .pipe(gulp.dest('./production/'));

});

检查,压缩,合并JS

// 检查、压缩、合并js

gulp.task('concatJs', ['cleanJsFile'], function(){

    return gulp.src([config.dev.scriptsPath + '**/*.js', config.dev.directivesPath + '**/*.js', config.dev.viewPath + '**/*.js'])

               .pipe($.sourcemaps.init())

               .pipe($.jshint.reporter('default'))

               .pipe($.concat('appCode.js'))

               .pipe($.uglify({

                    mangle: true, // 是否修改变量名,默认为 true

                    compress: true // 是否完全压缩,默认为 true

               }))

               .pipe($.sourcemaps.write('./'))

               .pipe(gulp.dest(config.dist.scriptsPath))

               .pipe(browserSync.reload({stream:true}));

});

文件合并

// 文件合并

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

    return gulp.src( './development/css/test.css' )

               .pipe($.concat('all.css'))

               .pipe(gulp.dest('./production/'));

});

删除目录

//删除目录

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

    del('../' + productionFileName);

    console.log("文件删除执行完毕!");

});

 

//删除目录

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

    return gulp.src(config.dist.path)

               .pipe($.clean());

});

压缩html

/** 使用gulp-htmlmin压缩html,可以压缩页面javascript、css,* 去除页面空格、注释,删除多余属性等操作*/

var htmlMinOptions = {

    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.task('copyDirectivesDir', ['cleanDirectivesDir'], function(){

    return gulp.src(config.dev.directivesPath + '**/*.html')

               .pipe($.htmlmin(htmlMinOptions))

               .pipe(gulp.dest(config.dist.directivesPath))

               .pipe(browserSync.reload({stream:true}));

});

Tags:GU UL LP P常 
作者:网络 来源:xujing__62