多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
gulp作为一个在webpackl之前的构建工具,到现在也有很多人使用,这个使用非常的简单。 全局安装后需要在项目中也安装一次哦 全局安装 ~~~ npm install gulp -g ~~~ 项目中安装 ~~~ npm install gulp --save-dev ~~~ 在项目根目录下创建一个名为 gulpfile.js 的文件直接写需要为我们执行的事就好啦 下面贴一个我项目中常用的配置: ~~~ var gulp = require('gulp'); var imgMin = require('gulp-imagemin') var uglify = require('gulp-uglify') var minifycss = require('gulp-minify-css') var autoprefixer = require('gulp-autoprefixer') //拷贝所有html文件 html压缩没多大意义 gulp.task('copyHtml', function() { gulp.src('productEnvironment/*.html') .pipe(gulp.dest('')) }) // 压缩css 自動添加前缀 gulp.task('minifycss', function() { gulp.src('productEnvironment/css/*') .pipe(autoprefixer({ browsers: ['last 100 versions'], cascade: true })) .pipe(minifycss()) .pipe(gulp.dest('css')) }); //图片压缩 gulp.task('minImg', function() { gulp.src('productEnvironment/img/*') .pipe(imgMin()) .pipe(gulp.dest('img')) }) //压缩js gulp.task('minijs', function() { gulp.src('productEnvironment/js/*') .pipe(uglify()) .pipe(gulp.dest('js')) }) // 默认 gulp.task('default', ['copyHtml', 'minImg', 'minijs', 'minifycss']) ~~~ 当然在使用前需要先安装依赖。 package.json ~~~ { "name": "resume", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "" }, "author": "", "license": "ISC", "devDependencies": { "gulp": "^3.9.1", "gulp-autoprefixer": "^4.1.0", "gulp-imagemin": "^4.1.0", "gulp-minify-css": "^1.2.4", "gulp-uglify": "^3.0.0" } } ~~~