gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器,利用gulp可以对网站资源进行优化,提升编码效率。
gulp学习之基础
1.cnpm:淘宝镜像
npm install cnpm -g --registry=https://registry.npm.taobao.org
2.gulp安装
全局安装 gulp:$cnpm install --global gulp
作为项目的开发依赖(devDependencies)安装:$cnpminstall --save-dev gulp
3.新建package.json文件
{ "name": "study", "version": "1.0.0", "description": "", "main": "gulpfile.js", "dependencies": { "gulp": "^3.9.1", "gulp-less": "^3.3.2", "gulp-jshint": "^2.0.4", "gulp-concat": "^2.6.1", "gulp-uglify": "3.0.0", "gulp-rename": "1.2.2", "gulp-minify-css": "1.2.4", "gulp-htmlmin": "3.0.0", "gulp-base64": "0.1.3", "gulp-rev": "8.0.0",//md "gulp-rev-collector": "1.2.2" }, "devDependencies": { "gulp-jshint": "^2.0.4", "jshint": "^2.9.5" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "git+https://github.com/......" }, "author": "Soniachen", "license": "ISC", "bugs": { "url": "https://github.com/......." }, "homepage": "https://github.com/......" }
4.安装配置项 $cnpm install
5. 新建gulpfile.js文件
//导入工具包 require('node_modules里对应模块') var gulp = require('gulp'), //本地安装gulp所用到的地方 less = require('gulp-less'), jshint = require('gulp-jshint'), concat = require('gulp-concat'), uglify = require('gulp-uglify'), rename = require('gulp-rename'), minify = require('gulp-minify-css'), htmlmin = require('gulp-htmlmin'), base64 = require('gulp-base64'); var rev = require('gulp-rev'); //- 对文件名加MD5后缀 var revCollector = require('gulp-rev-collector'); //- 路径替换 // 检查脚本 gulp.task('lint', function() { gulp.src('./js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')); }); //定义一个testLess任务(自定义任务名称) gulp.task('Less', function () { gulp.src('assets/less/*.less') //该任务针对的文件 .pipe(base64({ baseDir: 'yhcj', extensions: ['svg', 'png', /\.jpg#datauri$/i], exclude: [/\.server\.(com|net)\/dynamic\//, '--live.jpg'], maxImageSize: 8*1024, // bytes debug: true }))//将8KB以下的图片转换成base64编码 .pipe(less()) //该任务调用的模块 .pipe(minify()) .pipe(rename({suffix:'.min'})) .pipe(gulp.dest('assets/css')); });// 压缩JS文件 gulp.task('scripts', function() { gulp.src('tassets/js/*.js') .pipe(uglify()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('assets/minjs')); }); //合并压缩JS文件 gulp.task('scripts', function() { gulp.src(['assets/js/a.js','assets/js/b.js']) .pipe(concat('c.js')) .pipe(gulp.dest('assets/js')) .pipe(rename('c.min.js')) .pipe(uglify()) .pipe(gulp.dest('assets/minjs')); });//监听预编译文件gulp.task('watch',function(){ gulp.watch('assets/less/*.less',['Less']);});//压缩htmlgulp.task('testHtmlmin', function () { var options = { removeComments: true,//清除HTML注释 collapseWhitespace: false,//压缩HTML collapseBooleanAttributes: false,//省略布尔属性的值 <input checked="true"/> ==> <input /> removeEmptyAttributes: false,//删除所有空格作属性值 <input id="" /> ==> <input /> removeScriptTypeAttributes: true,//删除<script>的type="text/javascript" removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css" minifyJS: true,//压缩页面JS minifyCSS: true//压缩页面CSS }; gulp.src('Portal/a.html') .pipe(htmlmin(options)) .pipe(rename('amin.html')) .pipe(gulp.dest('Portal'));});//压缩图片gulp.task('build', function () { return gulp.src('assets/css/*.min.css') .pipe(base64({ baseDir: 'public', extensions: ['svg', 'png', /\.jpg#datauri$/i], exclude: [/\.server\.(com|net)\/dynamic\//, '--live.jpg'], maxImageSize: 8*1024, // bytes debug: true })) .pipe(gulp.dest('themes/simplebootx/Public/assets/css'));});//加MD5后缀gulp.task('mdfive', function() { //- 创建一个名为 concat 的 task gulp.src(['assets/css/*.min.css'])//- 需要处理的css文件,放到一个字符串数组里 .pipe(minify()) //- 压缩处理成一行 .pipe(rev()) //- 文件名加MD5后缀 .pipe(gulp.dest('assets/css/min')) //- 输出文件本地 .pipe(rev.manifest()) //- 生成一个rev-manifest.json .pipe(gulp.dest('assets/css/rev')); //- 将 rev-manifest.json 保存到 rev 目录内});//替换页面内文件名gulp.task('rev', function() { gulp.src(['assets/css/rev/*.json', 'head.html']) //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件 .pipe(revCollector({ replaceReved: true })) //- 执行文件内css名的替换 .pipe(gulp.dest('Public')); //- 替换后的文件输出的目录});gulp.task('default',['Less']); //定义默认任务 elseTask为其他任务,该示例没有定义elseTask任务//gulp.task(name[, deps], fn) 定义任务 name:任务名称 deps:依赖任务名称 fn:回调函数//gulp.src(globs[, options]) 执行任务处理的文件 globs:处理的文件路径(字符串或者字符串数组)//gulp.dest(path[, options]) 处理完后文件生成路径
学习中,欢迎指正~