内容简介: 最近几年前端技术发展日新月异,特别是单页应用的普及。组件化、工程化、自动化成了前端发展的趋势。webpack已经成为了前端打包构建的主流,但是一些本文需要安装node(自行安装),并了解过gulp入门。gulp脚本下载:首先初始化npm依赖项与基本信息,使用命令
最近几年前端技术发展日新月异,特别是单页应用的普及。组件化、工程化、自动化成了前端发展的趋势。webpack已经成为了前端打包构建的主流,但是一些 老古董
的项目还是存在的,也有优化的必要,正好公司的老项目需要优化,不多说拿gulp实践一下。
本文需要安装node(自行安装),并了解过gulp入门。gulp脚本下载: github.com/youhunwl/gu… 欢迎star。
实践
创建项目目录
首先初始化npm依赖项与基本信息,使用命令 npm init
一直回车,生成 package.json
文件,也可以直接去上边github仓库目录下载。
你的项目目录关系到你的gulp脚本里的任务路径,我脚本里写的是匹配所有的目录和文件。我简单举个例子:这里 js/common
里的js文件也会被处理。如果只想处理特定目录的文件,请修改任务里的路径。
demo/ ├── css/ │ ├── index.css ├── js/ │ ├── common/ │ │ └─ common.js │ ├── index.js ├── img/ │ ├── logo.png └── index.html 复制代码
安装所需依赖
安装gulp所需要的模块,这里直接列举我的 package.json
文件内容
{ "name": "demo", "version": "0.0.0", "private": true, "dependencies": {}, "devDependencies": { "gulp": "^3.9.1", "gulp-autoprefixer": "^3.1.1", "gulp-cache": "^1.0.2", "gulp-clean-css": "^3.10.0", "gulp-htmlclean": "^2.7.15", "gulp-htmlmin": "^3.0.0", "gulp-if": "^2.0.2", "gulp-imagemin": "^4.1.0", "gulp-minify-css": "^1.2.4", "gulp-notify": "^3.0.0", "gulp-path": "^3.0.3", "gulp-rev-append": "^0.1.8", "gulp-sequence": "^0.4.6", "gulp-sourcemaps": "^2.6.4", "gulp-uglify": "^2.0.0", "uglify-js": "^3.3.9" } } 复制代码
编写gulp脚本
新建 gulpfile.js
文件,并引入所需模块,这里我把路径统一写在 PATHS
中。具体关于路径的写法,可以去看gulp官网的api: www.gulpjs.com.cn/docs/api/
gulp-minify-css
这个官网提示已经弃用,改用 gulp-clean-css
,这里保留只是为了告诉大家,效果一样,用户一致,为了保证项目不出问题,还是用最新的吧。
'use strict'; var gulp = require('gulp'), minifycss = require('gulp-minify-css'),//压缩css 已弃用 cleancss = require('gulp-clean-css'),//压缩css imagemin = require('gulp-imagemin'),//压缩图片 autoprefixer = require('gulp-autoprefixer'),//处理浏览器前缀 uglify = require('gulp-uglify'),//压缩js sourcemaps = require('gulp-sourcemaps'),//生成 sourcemap gulpif = require('gulp-if'),//条件判断 notify = require('gulp-notify'),//处理报错 cache = require('gulp-cache'),//只压缩修改的图片 htmlclean = require('gulp-htmlclean'),// 精简html htmlmin = require('gulp-htmlmin'),//压缩html rev = require('gulp-rev-append'),//增加版本号 sequence = require('gulp-sequence'),//同步执行任务 PATHS = { ROOT: './', DEST: './dist/', HTML: '**/*.{html,htm}', CSS: '**/*.css', IMG: '**/*.{png,jpg,gif,ico}', JS: '**/*.js' } 复制代码
压缩处理css
这里需要排除 node_modules
文件夹和生成构建的后的目录 /dist/
及它们的子目录,直接 !
后面跟要排除的目录就行了。
gulp.task('minify-css', function () { return gulp.src([PATHS.CSS,'!./dist/**', '!./node_modules/**']) .pipe(sourcemaps.init()) .pipe(autoprefixer({ browsers: ['last 10 versions', 'Firefox >= 20', 'Opera >= 36', 'ie >= 9', 'Android >= 4.0', ], cascade: true, //是否美化格式 remove: false //是否删除不必要的前缀 })) .pipe(cleancss({ keepSpecialComments: '*' //保留所有特殊前缀 })) .pipe(sourcemaps.write('.')) .pipe(gulp.dest(PATHS.DEST)) .pipe(notify({ message: 'css minify complete' })); }); 复制代码
有些引用的css或者js不需要压缩,比如 jQuery
', Bootstrap
,也或者是公司内部的公共库 .min.{css,js}等等。
这里咱们就用到 gulp-if
了,去排除min.css
var conditionCss = function (f) { if (f.path.endsWith('.min.css')) { return false; } return true; }; 复制代码
再修改下处理css的操作
.pipe(gulpif(conditionCss, cleancss({ keepSpecialComments: '*' //保留所有特殊前缀 }))) 复制代码
压缩处理js
同理排除下 min.js ,这里还要注意记得把 gulp脚本也排除不处理。
gulp.task('minify-js', function () { return gulp.src([PATHS.JS, '!./dist/**', '!./node_modules/**', '!gulpfile.js']) .pipe(sourcemaps.init()) .pipe(gulpif(conditionJs, uglify())) .pipe(sourcemaps.write('.')) .pipe(gulp.dest(PATHS.DEST)) .pipe(notify({ message: 'js minify complete' })); }); 复制代码
压缩处理 img
gulp.task('minify-img', function () { return gulp.src([PATHS.IMG,'!./dist/**', '!./node_modules/**']) .pipe(cache(imagemin())) .pipe(gulp.dest(PATHS.DEST)); }); 复制代码
压缩处理HTML
gulp.task('minify-html', function () { return gulp.src([PATHS.HTML,'!./dist/**', '!./node_modules/**']) .pipe(htmlclean()) .pipe(htmlmin({ removeComments: true, //清除HTML注释 collapseWhitespace: true, //压缩HTML minifyJS: true, //压缩页面JS minifyCSS: true, //压缩页面CSS minifyURLs: true })) .pipe(gulp.dest(PATHS.DEST)); }); 复制代码
增加版本号
gulp.task('rev', function () { return gulp.src([PATHS.HTML,'!./dist/**', '!./node_modules/**']) .pipe(rev()) .pipe(gulp.dest(PATHS.DEST)); }); 复制代码
同步执行task
因为gulp所有的任务都是异步完成的,在有时候我们需要同步执行任务,比如:先编译less,在对编译好的css进行压缩,这个时候异步就有问题了。
gulp.task('deploy', sequence(['minify-css', 'minify-js'], 'minify-img', 'rev', 'minify-html')); 复制代码
执行gulp所有任务
这里创建一个名为 default
的任务,执行上面的 deploy
任务
gulp.task('default', ['deploy'], function (e) { console.log("[complete] Please continue to operate"); }) 复制代码
部署
在终端中输入 gulp
或者 gulp default
执行构建,即可在我们设置的产出目录里看到我们压缩处理后的代码。
至此,一个简单的gulp脚本就写的差不多了,麻雀虽小五脏俱全。如果大家有什么好的建议欢迎交流。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
iOS应用逆向工程 第2版
沙梓社、吴航 / 机械工业出版社 / 2015-4-1 / 79.00
你是否曾因应用上线的第一天即遭破解而无奈苦恼,想要加以防范,却又束手无策? 你是否曾为某一应用深深折服,想要借鉴学习,却又无从下手? 你是否已不满足于public API,想要进军Cydia开发,却又求学无门? 你是否已产生“不识Apple真面目,只缘身在App Store中”的危机感,想要通过阅读来一窥这冰山一角外的整个北极,却又找不到合适的书? 你是否已经因无法跨越开发......一起来看看 《iOS应用逆向工程 第2版》 这本书的介绍吧!