Git Product home page Git Product logo

201602jsgulp's Introduction

#创建项目

mkdir gulp-demo && cd gulp-demo
npm init -y

#安装less

npm root -g 查看全局安装的模块目录
C:\Users\Administrator\AppData\Roaming\npm\node_modules

npm install less -g 全局安装less


C:\Users\Administrator\AppData\Roaming\npm\lessc -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\less\bin\lessc
创建一个快捷方式 npm\lessc指向正正需要的bin\lessc
这样做的原因是因为npm在环境变量中而less/bin不在

##安装gulp 查看本地安装目录

npm root
E:\gulp-demo\node_modules

全局安装

npm install -g gulp

本地安装

npm install gulp --save-dev

##依赖的不同

--save-dev 叫开发时依赖
开发的时候依赖或者说需要,真正上线后线上版本是不需要的。
--save 代表上线时的依赖
上线的时候也需要此模模块 mime

##本地模块的查找流程 从本地的node_modules中查找,如果找不到向上级查找,如果一直到根目录 都没有找到,就报错。

##添加gulpfile.js配置文件并编写一个自定义的任务

var gulp = require('gulp');//引入gulp模块
//定义一个任务
//名字叫hello
gulp.task('hello',function(){
    console.log('hello');
});

#练习 源文件 app index.html js less images

建一个综合任务

  1. js 合并压缩复制到dist
  2. less 编译 合并 压缩 复制到dist
  3. image 压缩 复制到dist
  4. index.html进行压缩
  5. 服务器 负责预览dist目录下面的文件并且当源文件发生改变后自动刷新

201602jsgulp's People

Contributors

guo296512521 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.