gulp 使用

最新推荐文章于 2024-02-23 16:55:30 发布

qq_25186543

最新推荐文章于 2024-02-23 16:55:30 发布

阅读量269

点赞数

分类专栏： js基础类

本文链接：https://blog.csdn.net/qq_25186543/article/details/80416205

版权

js基础类专栏收录该内容

50 篇文章

订阅专栏

1、安装node.js

2、全局安装 gulp

 npm install --global gulp

3、进入文件局部安装 gulp

npm install gulp --save-dev

4、在根目录创建 gulp.js

var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

5、运行命令 gulp 就可以了

6、任务的详解：合并和压缩JS、CSS文件

压缩JS，CSS文件需要引用如下组件：

gulp-minify-css: 压缩css
gulp-jshint: 检查js
gulp-uglify: 压缩js
gulp-concat: 合并文件
gulp-rename: 重命名文件
gulp-clean: 清空文件夹
gulp-notify:提示

安装组件

npm install  gulp-minify-css gulp-uglify gulp-rename gulp-concat gulp-clean gulp-notify --save-dev
npm install --save-dev jshint gulp-jshint

然后在 gulp.js 里写入任务

// 引入 gulp及组件
var gulp=require('gulp'),  //gulp基础库
    minifycss=require('gulp-minify-css'),   //css压缩
    concat=require('gulp-concat'),   //合并文件
    uglify=require('gulp-uglify'),   //js压缩
    rename=require('gulp-rename'),   //文件重命名
    jshint=require('gulp-jshint'),   //js检查
    notify=require('gulp-notify');   //提示

gulp.task('default',function(){ //执行任务
    gulp.start('minifyjs','minifycss');
});

//JS处理
gulp.task('minifyjs',function(){
   return gulp.src(['static/js/a.js','static/js/b.js'])  //选择操作的JS
   		.pipe(concat('test.js'))   //合并js
   		.pipe(uglify())                    //压缩
   		.pipe(rename({suffix:'.min'}))     //重命名
       	.pipe(gulp.dest('dist/js'))            //输出 
       	.pipe(notify({message:"js task ok"}));    //提示
});

//css处理
gulp.task('minifycss',function(){
   return gulp.src('static/css/*.css')      //设置css 里所有的 css 文件
       .pipe(concat('test.css'))      //合并css文件到"order_query"
       .pipe(gulp.dest('dist/css'))           //设置输出路径
       .pipe(rename({suffix:'.min'}))         //修改文件名
       .pipe(minifycss())                    //压缩文件
       .pipe(notify({message:'css task ok'}));   //提示成功
});