gulp压缩js和css

Posted 专注web开发

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了gulp压缩js和css相关的知识,希望对你有一定的参考价值。

类似于grunt,都是基于Node.js的前端构建工具。不过gulp压缩效率更高。

工具/原料

nodejs/npm

方法/步骤

首先要确保pc上装有node,然后在global环境和项目文件中都install gulp

npm install gulp -g (global环境)

npm install gulp --save-dev (项目环境)

在项目中install需要的gulp插件,一般只压缩的话需要

npm install gulp-minify-css gulp-concat gulp-uglify gulp-rename del --save-dev

更多插件可以在这个链接中找到 http://gratimax.net/search-gulp-plugins/

在项目的根目录新建gulpfile.js,require需要的module

    
   var gulp = require('gulp'),    minifycss = require('gulp-minify-css'),    concat = require('gulp-concat'),    uglify = require('gulp-uglify'),    rename = require('gulp-rename'),    del = require('del');

压缩css


gulp.task('minifycss', function() {    return gulp.src('src/*.css')      //压缩的文件        .pipe(gulp.dest('minified/css'))   //输出文件夹        .pipe(minifycss());   //执行压缩 });

压缩js


gulp.task('minifyjs', function() {    return gulp.src('src/*.js')        .pipe(concat('main.js'))    //合并所有js到main.js        .pipe(gulp.dest('minified/js'))    //输出main.js到文件夹        .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名        .pipe(uglify())    //压缩        .pipe(gulp.dest('minified/js'));  //输出 });

执行压缩前,先删除文件夹里的内容


gulp.task('clean', function(cb) {    del(['minified/css', 'minified/js'], cb) }); 默认命令,在cmd中输入gulp后,执行的就是这个命令 gulp.task('default', ['clean'], function() {    gulp.start('minifycss', 'minifyjs'); });

然后只要cmd中执行,gulp即可


以上是关于gulp压缩js和css的主要内容,如果未能解决你的问题,请参考以下文章

前端js和css的压缩合并之gulp

gulp压缩js和css

gulp

gulp压缩整站方法(html/css/js/image)

gulp压缩构建代码

js css 压缩