使用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'));
});

 

 

 

posted @ 2017-10-20 13:16  周先生zz  阅读(456)  评论(0)    收藏  举报