基于node安装gulp-一些命令

1.win+r:进入cdm
2.node -v:查询是否安装node
3.npm install -g gulp:安装gulp
4.gulp -v:查看是否安装gulp
5.cd desk:进入桌面
6.cd 20170410:进入文件夹
7.npm init:对文件夹进行重置
8.一些描述,可写可不写:
9.npm install gulp --save-dev:将gulp安装到项目中:
 10.安装多个模块:
 11.npm install gulp-uglify --save-dev:压缩js文件需要安装的模块
12.在根目录文件下新建一个gulpfile.js文件 
 13.引入模块信息
  1. //实现压缩js文件
  2. var gulp = require("gulp");
  3. //实现压缩js文件模块
  4. var uglify = require("gulp-uglify");
  5. var concat = require('gulp-concat');
  6. var open = require('gulp-open');
  7. var connect = require('gulp-connect');
14.创建任务
  1. gulp.task('js', function() {
  2. //1.找到源代码
  3. //*.js:所有的js文件
  4. //.src()找源码路径
  5. gulp.src("src/js/*.js")
  6. .pipe(uglify())//2.进行压缩代码
  7. .pipe(concat('all.js'))//2.5进行合并
  8. .pipe(gulp.dest("./dist/js"))//3.将压缩文件输出
  9. .pipe(connect.reload())//4.检测修改时页面刷新
  10. });
15.添加open模块默认打开浏览器的地址(uri::打开地址)
  1. // uri:打开的地址
  2. gulp.task('open', function(){
  3. gulp.src('src/*.html')
  4. .pipe(open({uri:'http://localhost:8088'}));
  5. });
16.检测是否被修改
  1. gulp.task("auto",function(){
  2. //监听文件修改
  3. gulp.watch('src/js/*.js',['js'])
  4. gulp.watch('src/*.html',['html'])
  5. gulp.watch('src/css/*.css',['css'])
  6. });
17.设置gulp的默认任务
  1. // 设置gulp的默认任务
  2. gulp.task('default', ['connect','open', 'auto','js','html','css']);
18.运行成功:
 
posted @ 2017-04-10 14:25  Chen,ChunChang  阅读(627)  评论(0编辑  收藏  举报