码迷,mamicode.com
首页 > Web开发 > 详细

gulp教程之压缩合并css,js

时间:2017-12-13 17:09:50      阅读:427      评论:0      收藏:0      [点我收藏+]

标签:image   des   src   pack   新建   16px   task   mini   ffffff   

package.json
如果你熟悉 npm 则可以利用 package.json 保存所有 npm install --save-dev gulp-xxx 模块依赖和模块版本。
在命令行输入

 npm init 

会依次要求补全项目信息,不清楚的可以直接回车跳过

安装依赖
安装 gulp 到项目(防止全局 gulp 升级后与此项目 gulpfile.js 代码不兼容)

 nup install gulp --save-dev 

说明:--save-dev 保存配置信息至 package.json 的 devDependencies 节点。
此时打开 package.json 会发现多了如下代码

"devDependencies": {
    "gulp": "^3.8.11"
}

声明此项目的开发依赖 gulp
接着安装其他依赖:项目中需要用的都需要安装,这里我们可以统一安装,之间用空格隔开
npm gulp-minify-css gulp-concat gulp-uglify gulp-rename gulp-util --save-dev
此时packjson会持续更新,将我们上面安装依赖统一写入packjson中。
配置 JS 任务
此时新建gulpfile.js文件
1.首先引入依赖

var gulp = require(‘gulp‘),
    minifycss = require(‘gulp-minify-css‘),
    concat = require(‘gulp-concat‘),
    uglify = require(‘gulp-uglify‘),
    rename = require(‘gulp-rename‘),
    gutil = require(‘gulp-util‘);

2.添加执行任务
//压缩css

gulp.task(‘minify_css‘, function () {
    var cssSrc = [‘./src/css/*.css‘];
    return gulp.src(cssSrc) //压缩的文件
        .pipe(concat(‘all.css‘)) //合并所有css到all.css
        .pipe(gulp.dest(‘./dist/css‘)) //输出文件夹
        .pipe(rename({suffix: ‘.min‘}))
        .pipe(minifycss())
        .pipe(gulp.dest(‘./dist/css‘)); //执行压缩
});        

//压缩js

gulp.task(‘minify_js‘, function() {
    var jsSrc = [‘./src/js/*.js‘,‘!./src/js/*.src.js‘];
    return gulp.src(jsSrc)
        .pipe(concat(‘all.js‘)) //合并所有js到all.js
        .pipe(gulp.dest(‘./dist/js‘)) //输出all.js到文件夹
        .pipe(rename({suffix: ‘.min‘})) //rename压缩后的文件名
        .pipe(uglify()) //压缩
        .pipe(gulp.dest(‘./dist/js‘)); //输出
});

3.默认任务
//默认任务

gulp.task(‘default‘, function(){
    gulp.run(‘minify_css‘, ‘minify_js‘);
});

执行任务
命令行下输入:

 gulp 
最终形成目录结构如下

技术分享图片

src是我们原始文件,dist里就是我们已经压缩成功之后生成的文件了

gulp教程之压缩合并css,js

标签:image   des   src   pack   新建   16px   task   mini   ffffff   

原文地址:http://www.cnblogs.com/chengjunL/p/8032929.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!