傻瓜版 gulp 安装和压缩步骤~

原创 xh1535457540 教程 小教程 208阅读 2018-01-25 15:58:17 举报

第一步: Win+R打开输入cmd继续

第二步:执行 cnpm install gulp -g 全局安装
第三步:检测是否安装成功 gulp -v 版本号3.9.

第四步:当前文件夹创建一个package.json 注:package.json是基于nodejs项目必不可少的配置文件,它是存放在项目根目录的普通json文件重点内容
进入cmd执行cnpm init来新建package.json
检测package.json是否成功新建
查看项目文件根目录,是否新建package.json,且内容是否和你终端中输入的一致。 package.json内容如下:
{ "name": "test", "version": "1.0.0", "description": "我是描述", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC"}
注:可不使用cnpm init方式,可选择手动创建package.json配置文件

第五步:本地安装gulp插件
注:全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能
进入你的项目文件路径中后,执行cnpm install gulp --save-dev

第六步:新建gulpfile.js gulpfile.js是gulp的配置文件,放于根目录中

第七步:当前文件夹安装cnpm install --save-dev gulp-uglify 下载压缩js的插件

第八步:gulp uglify:js 压缩js

第九步:快捷设置 npm run hi

压缩js
var gulp = require('gulp');//导入模块
var uglify = require('gulp-uglify');//压缩js
gulp.task('uglify:js',function(){
// console.log('hello gulp');//检测一下
gulp.src('gulp1.js')
.pipe(uglify())
.pipe(gulp.dest('dest'))
});

压缩css
var gulp = require('gulp');//导入模块
var cleanCss = require('gulp-clean-css');
gulp.task('cleanCss', [], function() {
gulp.src('asas.css') //找到原始文件
.pipe(cleanCss()) //压缩css代码
.pipe(gulp.dest('cssa')); //压缩后的代码储存在这里
});

监听
gulp.task('watch', function() {
//监听文件,一旦文件有变化,就执行相应的任务
gulp.watch('gulp1.js', ['uglifyJs']);
gulp.watch('asas.css', ['cleanCss']);
});

gulp解释

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复