js,css 自动化构建工具gulp初探

来源：互联网发布：侯喜王歌知乎编辑：程序博客网时间：2024/05/22 12:12

今天，在网上发现一个有意思的东东，gulp，一个自动化构建工具，可以用来快速压缩js，css文件。

官网地址：http://www.gulpjs.com.cn/

这个工具是基于node.js的，所以我们需要先安装node.js运行环境，去官网下载安装程序，https://nodejs.org，根据自己的操作系统选择安装包下载。具体怎么安装，这里就不怎么赘述了，网上一搜一大把的。
安装好node.js后，打开node.js的命令行工具
安装gulp组件，命令： npm install global gulp
进入项目所在的目录，通过cd命令
在项目所在的目录中安装gulp环境 npm install gulp --save-dev
安装压缩js,css需要的插件，
   npm install gulp-minify-css
   gulp-concat gulp-uglify
   gulp-rename
在项目根目录下创建gulpfile.js文件，文件内容如下

var gulp = require('gulp');var rename = require('gulp-rename');var uglify = require('gulp-uglify');var minify = require('gulp-minify-css');var fs=require("fs");var path=require("path");var dest='bulid\\';var jsDest=dest+'js\\';var cssDest=dest+'css\\';//读取文件夹中的文件到数组中，支持递归读取var readfile=function(p,fslist){var stats=fs.statSync(p);//当前路径是文件if(stats.isFile()){fslist.push(p);}//当前路径是文件夹 递归读取子文件夹else{var list= fs.readdirSync(p);for(var i=0;i<list.length;i++){readfile(p+"\\"+list[i],fslist);}}}//清空编译文件夹下的文件var clear=function(p){fs.readdir(p, function(e,files){if(files==undefined) return;for(var i=0;i<files.length;i++){var stats=fs.statSync(p+"\\"+files[i]);//当前路径是文件if(stats.isFile()){fs.unlink(p+"\\"+files[i]);}//当前路径是文件夹 删除子文件夹else{fs.rmdir(p+"\\"+files[i]);}}});}/*gulp.watch('*.js',function(e){console.log(e.type);if(e.type=="added"||e.type=="changed"){gulp.src(e.path).pipe(uglify()).pipe(rename({ extname: '.min.js' })).pipe(gulp.dest("dest/"));}else if(e.type=="deleted"){var p=e.path;var b=p.substr(0,p.lastIndexOf('\\'));console.log(b);var d=b+"\\dest\\"+p.substr(p.lastIndexOf('\\')+1);var d2=b+"\\dest\\"+p.substring(p.lastIndexOf('\\')+1,p.lastIndexOf('.'))+".min.js";}});*/gulp.task('default',function(){gulp.start(['script','css']);});gulp.task('script', function() {//清空压缩文件夹下的文件clear(jsDest);//读取文件var filelist=new Array();readfile(__dirname+"\\js\\",filelist);//压缩js文件for(var i=0;i<filelist.length;i++){var ext=path.extname(filelist[i]);if(ext==".js"){gulp.src(filelist[i]).pipe(uglify()).pipe(rename({ extname: '.min.js' })).pipe(gulp.dest(jsDest));}}});gulp.task('css', function() {//清空压缩文件夹下的文件clear(cssDest);//读取文件var filelist=new Array();readfile(__dirname+"\\css\\",filelist);//压缩css文件for(var i=0;i<filelist.length;i++){var ext=path.extname(filelist[i]);if(ext==".css"){gulp.src(filelist[i]).pipe(minify()).pipe(rename({ extname: '.min.css' })).pipe(gulp.dest(cssDest));}}});

0 0