使用gulp实现js,css压缩和less语言编译
step1:gulp的安装,gulp需要安装在node环境下所以你的电脑必需事先安装node地址:
https://nodejs.org/
安装完node后你的电脑打开cmd调试就会发现已经有了npm服务器,对我们就需要从此处下载gulp环境:
step2:gulp环境的配置;1.先在全局中安装(一台电脑执行一次之后此步奏可以永不执行,此步奏较为费时)
npm install -g gulp
step3:打开自己的项目文件夹,开始使用gulp:
在原路径创建一个gulpfile.js文件配置; //js压缩:安装插件指令:npm install gulp gulp-uglify var gulp = require('gulp'), uglify = require("gulp-uglify"); gulp.task('default', function () { gulp.src('js/*.js') // 要压缩的js⽂文件‘*’代表全局匹配,匹配所有以。js结尾的文件 .pipe(uglify()) //使⽤用uglify进⾏行行压缩, .pipe(gulp.dest('dist/js')); //压缩后的路路径 }); //css压缩;安装插件指令:npm install --save-dev gulp-minify-css var gulp = require('gulp'), minifyCss = require("gulp-minify-css"); gulp.task('default', function () { gulp.src('css/*.css') // 要压缩的css⽂文件 .pipe(minifyCss()) //压缩css .pipe(gulp.dest('dist/css')); }); //文件改名字 //指令:npm install --save-dev gulp-rename var gulp = require('gulp'), rename = require('gulp-rename'); gulp.task('default', function () { gulp.src('css/*.css') .pipe(rename({suffix: '.min.css'})) //要改的名字 .pipe(gulp.dest('css')); }); //合并文件夹 //指令:npm install --save-dev gulp-concat var gulp = require('gulp'), concat = require("gulp-concat"); gulp.task('default', function () { gulp.src('js/*.js') //要合并的文件 .pipe(concat('all.js')) // 合并匹配 到的js文件并命名为 "all.js" .pipe(gulp.dest('dist/js')); }); //less编译 //指令:npm install --save-dev gulp-less var gulp = require('gulp'), less = require("gulp-less"); gulp.task('default', function () { gulp.src('less/*.less') .pipe(less()) .pipe(gulp.dest('dist/css')); }); //图片压缩 //指令:npm install gulp-imagemin --save-dev var gulp = require('gulp'); var imagemin = require('gulp-imagemin'), pngquant = require('imagemin-pngquant'); gulp.task('default', function () { return gulp.src('src/*') .pipe(imagemin({ progressive: true, use: [pngquant()] })) .pipe(gulp.dest('imagemin-dist')); });
//深度压缩图片:
var gulp = require('gulp'),
imagemin = require('gulp-imagemin'),
//确保本地已安装imagemin-pngquant [cnpm install imagemin-pngquant --save-dev]
pngquant = require('imagemin-pngquant')gulp.task('default', function () {
gulp.src('img/*.{png,jpg,gif,ico}')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox属性
use: [pngquant()] //使用pngquant深度压缩png图片的imagemin插件
}))
.pipe(gulp.dest('img1'));
});

浙公网安备 33010602011771号