gulp完成javascript压缩合并,css压缩

最近须要对项目进行优化,主要是对js的压缩合并和css文件的压缩,查找相关资料以后发现gulp能够实现相关的功能,特此分享一下使用心得。css

1.安装gulphtml

gulp是基于Node.js的前端构建工具。因此首先须要安装nodejs,安装nodejs前端

完成nodejs安装以后,须要使用npm安装gulp。node

先安装全局gulpgit

npm install -g gulp

而后在项目根目录下安装本地gulp。github

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

好的,如今gulp已经安装完成了,可是gulp自己不提供js压缩合并等功能,须要使用gulp的相关插件。目前只须要完成js压缩合并和css文件压缩的功能,先安装相应的插件:gulp

1.css压缩   gulp-clean-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-clean-css gulp-uglify gulp-concat gulp-rename --save-dev
npm install jshint gulp-jshint --save-dev

安装好的插件会出如今上面提到的node_modules文件夹中。

2.使用gulp

ok,如今可使用gulp了,在项目根目录下建立gulpfile.js文件。

在gulpfile.js中添加如下代码

var gulp = require('gulp'),
  //代替 minifycss
  cleanCSS = require('gulp-clean-css'),
  //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(cleanCSS({compatibility: 'ie7'})) //执行压缩
            .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命令:

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

bingo,如今能够在css文件夹中看到压缩好的css文件,在js中能够看到合并压缩好的main.min.js 。任务完成,只须要将html中css,js引用的路径修改为新的路径便可。

 

以上即是使用gulp的心得体会,gulp是一个正在快速成长的构建工具,他还有不少其余好用的工具(例如watch功能,能够实时监视文件的变化,自动完成相关操做)。之后能够继续关注、研究gulp,更多的应用gulp到前端开发中。

 

PS:  2016.9.12 更新了 gulp-jshint 的获取方式,用 gulp-clean-css 替换了 gulp-minify-css 

相关文章
相关标签/搜索