美文网首页
gulp插件

gulp插件

作者: 枝头残月野狼嚎嗷嗷呜 | 来源:发表于2017-03-23 08:46 被阅读0次

gulp-rename 改名字
gulp-uglify 压缩js
gulp-minify-css 压缩css
gulp-jshint 检查js

代码示例(gulpfile.js)

var gulp = require('gulp'),
    minifycss = require('gulp-minify-css'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    jshint=require('gulp-jshint');
    //语法检查
    gulp.task('jshint', function () {
        return gulp.src('js/*.js')
            .pipe(jshint())
            .pipe(jshint.reporter('default'));
    });
    //压缩css
    gulp.task('minifycss', function() {
        return gulp.src('css/*.css')    //需要操作的文件
            .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名
            .pipe(minifycss())   //执行压缩
            .pipe(gulp.dest('Css'));   //输出文件夹
    });
    //压缩,合并 js
    gulp.task('minifyjs', function() {
        return gulp.src('js/*.js')      //需要操作的文件
            .pipe(concat('main.js'))    //合并所有js到main.js
            .pipe(gulp.dest('js'))       //输出到文件夹
            .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名
            .pipe(uglify())    //压缩
            .pipe(gulp.dest('Js'));  //输出
    });
  //默认命令,在cmd中输入gulp后,执行的就是这个任务(压缩js需要在检查js之后操作)
    gulp.task('default',['jshint'],function() {
        gulp.start('minifycss','minifyjs'); 
  });

相关文章

  • 编写gulp插件

    本章讲解如何编写gulp插件,这里通过实现一个简单的插件功能来一步步讲解如何编写gulp插件。 gulp插件结构 ...

  • gulp压缩合并文件

    gulp压缩合并文件流程 //引入gulp和gulp插件var gulp = require('gulp');va...

  • gulp的简单使用

    gulp使用流程:安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gu...

  • gulp之插件、监控、api使用

    一、gulp插件的使用 |--插件的实质:gulp插件的实质是Node转换流,它封装了-通过管道(pipeli...

  • gulp入门

    安装gulp 安装gulp插件 gulp使用与执行 在目录创建gulpfile.js文件 执行:gulp defa...

  • gulp 配置及插件体系

    gulp 配置及插件体系 gulp-autoprefixer 的browsers参数详解 (传送门): gulp...

  • gulp--自动化构建工具

    常用的gulp插件: 1、css压缩:gulp-caanano; 2、图片压缩:gulp-imagemin; 3、...

  • gulp常用插件整理(持续更新)

    gulp常用插件整理 1.gulp-sass(sass编译) 2.gulp-compass(sass编译) 3.g...

  • gulp常用插件整理

    gulp常用插件整理 1.gulp-sass(sass编译) 2.gulp-compass(sass编译) 3.g...

  • gulp资源整理

    Gulp官网 Gulp中文网 Gulp插件网 博客: 前端构建工具gulpjs的使用介绍及技巧 - 无双 gulp...

网友评论

      本文标题:gulp插件

      本文链接:https://www.haomeiwen.com/subject/evwonttx.html