开发者社区> 木头先生> 正文

gulp常用插件

简介: 1、gulp-uglify(JS压缩) 安装:npm install --save-dev gulp-uglify gulpfile.js代码如下: var gulp = require('gulp'), var rename= require('gulp-rename') var uglify= require("gulp-uglify"); gulp.
+关注继续查看

1、gulp-uglify(JS压缩)

安装:npm install --save-dev gulp-uglify

gulpfile.js代码如下:

var gulp = require('gulp'),

var rename= require('gulp-rename')

var uglify= require("gulp-uglify");

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

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

         .pipe(uglify())//压缩

         .pipe(rename('index.min.js'))    

         .pipe(gulp.dest('build/js'));

});

gulp.task('default',['rename']);

 

2、gulp-minify-html(html压缩)

安装:npm install --save-dev gulp-minify-html

代码如下:

var gulp = require('gulp'),

var minifyHtml= require("gulp-minify-html");

gulp.task('minify-html',function() {

       gulp.src('src/**/*.html')//要压缩的html文件

       .pipe(minifyHtml())//压缩

      .pipe(gulp.dest('build'));

});

gulp.task('default',['minify-html']);

 

3. gulp-concat (js文件合并)

安装:npm install --save-dev gulp-concat

代码如下:

var gulp = require('gulp'),

concat= require("gulp-concat");

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

        gulp.src('src/**/*.js')  //要合并的文件

        .pipe(concat('index.js'))  //合并匹配到的js文件并命名为 "index.js"

       .pipe(gulp.dest('build/js'));

});

gulp.task('default',['concat']);

 

4、gulp-jada

安装:npm install –save-dev  gulp-jada

Gulpfile.js代码如下:

var gulp= require('gulp');

var jade= require('gulp-jade');

gulp.task("jade",function(){

gulp.src("./jade/*.jade")

       .pipe(jade({

       pretty:true

}))

     .pipe(gulp.dest("html/"))

})

      gulp.task("default",["watch"],function(){

      gulp.watch("jade/*.jade",["jade"]);

})

 

5、gulp-less

安装:npm install –save-dev  gulp-less

Gulpfile.js代码如下:

var gulp = require('gulp'),

var less= require("gulp-less");

gulp.task('compile-less',function() {

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

       .pipe(less())

       .pipe(gulp.dest('build/css'));

});

gulp.task('default',['compile-less']);

 

6、gulp-sass

安装:npm install –save-dev  gulp-sass

代码如下:

var gulp = require('gulp'),

var sass= require("gulp-sass");

gulp.task('compile-sass',function() {

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

        .pipe(sass())

        .pipe(gulp.dest('build/css'));

});

gulp.task('default',['compile-sass']);

 

7、gulp-imagemin(图片压缩)

安装:npm install –save-dev  gulp-imagemin

代码如下:

var gulp = require('gulp');

var imagemin = require('gulp-imagemin');

gulp.task('uglify-imagemin',function() {

return gulp.src('src/images/*')

        .pipe(imagemin())

        .pipe(gulp.dest('build/images'));

});

gulp.task('default',['uglify-imagemin']);

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
解决 Angular 官网下载的 library Schematics build 出错的办法
解决 Angular 官网下载的 library Schematics build 出错的办法
66 0
使用screenfull插件报错问题
使用screenfull插件报错问题
154 0
vscode-live-sass-compiler配置清单
vscode-live-sass-compiler配置清单
35 0
解决 Angular 官网下载的库 Schematics 执行 npm run build 时遇到的编译错误
解决 Angular 官网下载的库 Schematics 执行 npm run build 时遇到的编译错误
79 0
Sublimetext 3 常用插件
          今天配了一下开发工具,其实主要是想配置svn插件,但是后来查了下,发现sublimet的插件库还是蛮丰富的,顺手安了一些别的插件进去。       1,Svn插件安装的一些问题                    首先ctrl+shift+p,打开package control:                                         1,如果出现cannot install package..这种错误,请在host文件中加入:"50.116.34.243 sublime.wbond.net."。
1405 0
vscode插件教程:command
vscode插件教程:command
120 0
AngularJS的开发工具---yeoman 简易安装
版权声明:本文为半吊子子全栈工匠(wireless_com,同公众号)原创文章,未经允许不得转载。
687 0
搭建es6开发与非开发环境babel-browser
搭建es6开发与非开发环境babel-browser
123 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
基于webpack和npm的前端组件化实践
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
相关实验场景
更多