使用Gulp进行Javascript以及css压缩合并

1.安装gulp

gulp是基于Node.js的前端构建工具。所以首先需要安装nodejs,安装nodejs。

完成nodejs安装之后,需要使用npm安装gulp。

先安装全局gulp

npm install -g gulp
然后在项目根目录下安装本地gulp。

clipboard.png

此时项目根目录下会多出下面这个文件夹 node_modules

clipboard.png

好的,现在gulp已经安装完成了,但是gulp本身不提供js压缩合并等功能,需要使用gulp的相关插件。目前只需要完成js压缩合并和css文件压缩的功能,先安装相应的插件:

1.css压缩   gulp-minify-css

2.js压缩   gulp-uglify

3.js合并   gulp-concat  

由于压缩之前需要对js代码进行代码检测,压缩完成之后需要加上min的后缀,我们还需要安装另外两个插件:

4.重命名   gulp-rename

5.js代码检测  gulp-jshint (或gulp-jslint)

(更多插件可以查看 http://gulpjs.com/plugins/ )

在项目根目录下执行以下命令:

npm install gulp-minify-css gulp-uglify gulp-concat gulp-rename gulp-jshint --save-dev
安装好的插件会出现在上面提到的node_modules文件夹中。

2.使用gulp

ok,现在可以使用gulp了,在项目根目录下创建gulpfile.js文件。

在gulpfile.js中添加以下代码

var gulp = require('gulp'),
    minifycss = require('gulp-minify-css'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    jshint=require('gulp-jshint');
    //语法检查
    gulp.task('jshint', function () {
        return gulp.src('js/*.js')
            .pipe(jshint())
            .pipe(jshint.reporter('default'));
    });
    //压缩css
    gulp.task('minifycss', function() {
        return gulp.src('css/*.css')    //需要操作的文件
            .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名
            .pipe(minifycss())   //执行压缩
            .pipe(gulp.dest('Css'));   //输出文件夹
    });
    //压缩,合并 js
    gulp.task('minifyjs', function() {
        return gulp.src('js/*.js')      //需要操作的文件
            .pipe(concat('main.js'))    //合并所有js到main.js
            .pipe(gulp.dest('js'))       //输出到文件夹
            .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名
            .pipe(uglify())    //压缩
            .pipe(gulp.dest('Js'));  //输出
    });
  //默认命令,在cmd中输入gulp后,执行的就是这个任务(压缩js需要在检查js之后操作)
    gulp.task('default',['jshint'],function() {
        gulp.start('minifycss','minifyjs'); 
  });

上述代码中的相关方法可以查看 gulp API docs

在文件根目录下执行gulp命令:

clipboard.png

(如果Js文件有问题时,会出现相应的error提示,按照提示的错误信息修改即可)

bingo,现在可以在css文件夹中看到压缩好的css文件,在js中可以看到合并压缩好的main.min.js 。任务完成,只需要将html中css,js引用的路径修改成新的路径即可。

增加Sass

npm install gulp-sass --save-dev
'use strict';
 
var gulp = require('gulp');
var sass = require('gulp-sass');
 
gulp.task('sass', function () {
  gulp.src('./sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});
 
gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值