Gulp学习笔记

2. 安装node.js:node.js官网
3. 选装cnpm:
   1. 官方网址：http://npm.taobao.org
   2. 安装：命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org；  注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误
4. 全局安装gulp：
   1. 安装：命令提示符执行cnpm install gulp -g
   2. 查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装
5. 新建package.json文件
   1. 说明：package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件；
   2. 它是这样一个json文件（注意：json文件内是不能写注释的，复制下列内容请删除注释）：

      1. {
           "name": "test",   //项目名称（必须）
           "version": "1.0.0",   //项目版本（必须）
           "description": "This is for study gulp project !",   //项目描述（必须）
           "homepage": "",   //项目主页
           "repository": {    //项目资源库
             "type": "git",
             "url": "https://git.oschina.net/xxxx"
           },
           "author": {    //项目作者信息
             "name": "surging",
             "email": "surging2@qq.com"
           },
           "license": "ISC",    //项目许可协议
           "devDependencies": {    //项目依赖的插件
             "gulp": "^3.8.11",
             "gulp-less": "^3.0.0"
           }
         }

   3. 当然我们可以手动新建这个配置文件，但是作为一名有志青年，我们应该使用更为效率的方法：命令提示符执行cnpm init
   4. 查看package.json帮助文档，命令提示符执行cnpm help package.json
   5. 特别注意：package.json是一个普通json文件，所以不能添加任何注释。参看 http://www.zhihu.com/question/23004511
6. 本地安装gulp插件
   1. 安装：定位目录命令后提示符执行cnpm install --save-dev
   2. 本示例以gulp-less为例（编译less文件），命令提示符执行cnpm install gulp-less --save-dev

   3. 将会安装在node_modules的gulp-less目录下，该目录下有一个gulp-less的使用帮助文档README.md

   4. 为了能正常使用，我们还得本地安装gulp：cnpm install gulp --save-dev

   5. PS：细心的你可能会发现，我们全局安装了gulp，项目也安装了gulp，全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能
7. 新建gulpfile.js文件（重要）
   1. 说明：gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件（其实将gulpfile.js放入其他文件夹下亦可）
   2. 它大概是这样一个js文件（更多插件配置请查看这里）：

      const  gulp=require('gulp');    //引用gulp
      const  del=require('del');      //引用gulp删除插件
      const  uglify=require('gulp-uglify');　　//引用压缩Js插件
      const  css=require('gulp-clean-css');　　//gulp压缩css文件
      const  rename = require("gulp-rename");　　//引用重命名插件
       
      gulp.task('hello',function () {     //定义一个hello任务
          console.log('hello')
      });
       
      //task()：定义任务
      //src():源文件
      // pipe():管道流，接通源头文件与目标文件的输出
      // dest():输出文件的目的地
      // watch():监视文件
      //事例：
      // 1、复制单个文件
      gulp.task('copyHtml',function () {
          return gulp.src('./src/public/login.html').pipe(gulp.dest("dist/public"))
      });
       
      // 2、复制多个文件
      gulp.task('copyAllHtml',function () {
          return gulp.src("./src/public/*.html").pipe(gulp.dest('dist/public'));
      });
       
      // 3、复制指定文件
      // [指定的文件已，指定的文件2]
      gulp.task('copy2Js',function () {
          return gulp.src(["./src/public/js/ajax.js",'dist/public/js/classPage.js'])
          .pipe(gulp.dest("dist/public/js"))
      });
       
      // 4、某个文件
      // ！排队的文件
      gulp.task("copyNoJs",function () {
          return gulp.src(['./src/public/js/*.js','!./src/public/js/Classroom.js'])
              .pipe(gulp.dest('dist/public/js'))
      });
       
      // 5、复制多个后缀名的图片
      // {选项一，选项二}
      gulp.task("copyImage",function () {
          return gulp.src('./src/public/img/*.{png,jpg,bmp,jpeg,gif}')
              .pipe(gulp.dest('dist/public/img'))
      });
       
      // 6、执行多个任务
      // gulp.task('任务名称',[任务依赖的模块],回调函数)
      // 依赖任务之间没有顺序之分，异步执行
      // 依赖任务之间完成后，在执行当前的回调函数
      gulp.task('build',['copyAllHtml','copyNoJs','copyImage'],function () {
          console.log('编译成功')
      });
       
      // 7、Watch:监视文件的变化
      gulp.task('myWatch',function () {
          gulp.watch('./src/public/login.html',['build'])
      });
       
      // 8、删除文件
      gulp.task("del",function () {
          // del('./dist/public/img/*.{jpg,png,jepg,gif}')
          // *：所有文件
          // **：所有文件夹
          del(['./dist/public/js/*']);
          del(['./dist/**/*']);
      });
       
      gulp.task('default',function () {
          gulp.start('serve')
       
      });
       
      // 9、压缩js文件
      gulp.task('ysjs',function(){
          return gulp.src('./src/public/js/*.js')
          .pipe(uglify())
          .pipe(gulp.dest('./src/public/js'));
       
       
      });
       
      //10、 添加监听
      gulp.task('watch_js',function(){
          return gulp.watch('./src/public/js/*.js',['ysjs'])
       
      });
       
      //11、压缩css文件
      gulp.task('css',function () {
          return gulp.src('./src/public/sass/*.css')
              .pipe(css())
              .pipe(gulp.dest('./src/public/sass'))
      });
      //添加监听
      gulp.task('jtCss',function () {
          return gulp.watch('./src/public/sass/*.css',['css'])
      });
      //12、重命名css文件
      gulp.task('reName',function () {
          return gulp.src('./src/public/sass/*.css')
              .pipe(rename({suffix: '.css'}))
              .pipe(css())
              .pipe(gulp.dest('./src/public/sass'))
      });　

8. 运行gulp
   1. 说明：命令提示符执行gulp 任务名称
   2. 编译less：命令提示符执行gulp testLess
   3. 当执行gulp default或gulp将会调用default任务里的所有任务[‘testLess’,’elseTask’]
9. 使用webstorm运行gulp任务
   1. 说明：使用webstorm可视化运行gulp任务
   2. 使用方法：将项目导入webstorm，右键gulpfile.js 选择”Show Gulp Tasks”打开Gulp窗口，若出现”No task found”，选择右键”Reload tasks”，双击运行即可
10. 使用vscode运行gulp任务