gulp常用插件

简介: 1、gulp-uglify(JS压缩)安装:npm install --save-dev gulp-uglifygulpfile.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']);

 

相关文章
|
Shell C语言
/bin/sh: cc: 未找到命令
/bin/sh: cc: 未找到命令
231 0
|
存储 分布式计算 Hadoop
Hadoop怎么处理数据
Hadoop怎么处理数据
218 0
|
8月前
|
机器学习/深度学习 人工智能 大数据
量子计算的现状与未来:从实验室到商用
量子计算正从理论探索迈向实际应用,全球科技巨头和科研机构积极研发,已在特定任务上展现巨大优势。本文探讨量子计算的现状、挑战、发展趋势及商用潜力,涵盖药物研发、金融工程、大数据处理等领域,展望其未来对各行业的深远影响。
|
4月前
|
数据安全/隐私保护
【YashanDB知识库】如何限制用户session连接数
【YashanDB知识库】如何限制用户session连接数
【YashanDB知识库】如何限制用户session连接数
|
11月前
|
存储 机器学习/深度学习 网络协议
Elasticsearch 集群节点
【8月更文挑战第24天】
81 5
|
Docker 容器
Docker - 容器的资源限制
Docker - 容器的资源限制
193 0
|
弹性计算 安全 Windows
湖北阿里云授权服务中心分析云服务器CPU跑满或跑高排查问题
相信很多客户在使用云服务器ECS时,若出现服务的速度变慢,或ECS实例突然断开。这种情况我们一般考虑服务器带宽和CPU是否有跑满或跑高的问题。若您预先创建报警任务,当带宽和CPU跑满或跑高时,系统将自动进行报警提醒。
2310 0
|
存储 分布式计算 Hadoop
[hadoop]常用命令
启动Hadoop 进入HADOOP_HOME目录。 执行sh bin/start-all.sh 关闭Hadoop 进入HADOOP_HOME目录。 执行sh bin/stop-all.
1151 0
|
关系型数据库 MySQL 数据库
innodb 引擎数据恢复
今天遇到一个问题 mysql-5.5 数据库保障 部分错误日志如下   InnoDB: stored checksum 808812544, prior-to-4.0.14-form stored checksum 959328563 InnoDB: Page lsn 791621944 858666297, low 4 bytes of lsn at page end 84188
1213 0