一、关于Gulp
Q1: 为什么需要Gulp或Grunt?
1. 缓存问题,javascript和css都属于静态文件,因此当我们修改javascript文件时候,经常会遇到local没问题,但是部署到server时候,问题依旧存在,通常这就是缓存导致
2. Javascript和css等项目依赖关系
依赖的产生,会导致请求时间的延长,影响性能。其次,越来越多的js和cs文件,需要请求多次,而浏览器的请求每次请求是有限的,因此我们需要压缩js和cs文件,来减少请求次数,提高性能。
Q2: 为什么选择Gulp?
Gulp的核心是基于流来进行文件的压缩,而Grunt是基于临时文件形式。Gulp减少了过多临时文件的产生,关于2者对比,如下表
Grunt |
Gulp |
Config First |
Code First |
Base on file |
Base on stream |
3000+ plugin |
1000+plugin |
其次,两者的过程也不一致
Grunt: Source-->Subtask1-->Temp.-->Subtask2-->Target //subtask越多产生的temp也就越多,这些temp文件是存放于disk之上的
Gulp: Soource-->Subtask1-->Subtask2-->gulp.dest()-->Target
在语法写法上,gulp也更简便和清晰
//grunt的语法 grunt.initConfig({ less: { development: { files: { "build/tmp/app.css": "assets/app.less" } } }, autoprefixer: { options: { browsers: [‘last 2 version‘, ‘ie 8‘, ‘ie 9‘] }, multiple_files: { expand: true, flatten: true, src: ‘build/tmp/app.css‘, dest: ‘build/‘ } } }); grunt.loadNpmTasks(‘grunt-contrib-less‘); grunt.loadNpmTasks(‘grunt-autoprefixer‘); grunt.registerTask(‘css‘, [‘less‘, ‘autoprefixer‘]);
//gulp的语法 var gulp = require(‘gulp‘), less = require(‘gulp-less‘), autoprefix = require(‘gulp-autoprefixer‘); gulp.task(‘css‘, function() { gulp.src(‘assets/app.less‘) .pipe(less()) .pipe(autoprefix(‘last 2 version‘, ‘ie 8‘, ‘ie 9‘)) .pipe(gulp.dest(‘build‘)); });
本文主要关于运用gulp的目的和如何运用,gulp更多的细节还请参考其他学习资料
二、创建我们的gulp
1. 安装
npm install -g gulp
2. 创建我们的gulpfile.js文件
在使用gulp的时候,我们需要创建gulpfile.js,这是npm执行gulp所定向的文件名。
a. 首先定义我们的所要压缩的文件来源和去处
var paths = { src : { jsx: ‘Scripts/App/Components/*.jsx‘, componentsRoot: ‘./Scripts/App/components/‘, app: ‘./Scripts/App/app.js‘, flux: ‘./Scripts/App/flux.js‘, scripts: ‘Scripts/**/*.js‘ }, dest: { root: ‘root‘, bundles: ‘root/Scripts/dist‘, css: ‘root/Content/Style/app‘, bootstrap: ‘root/Content/Style/libs/bootstrap‘, serverBundle: ‘serverBundle.js‘, clientBundle: ‘clientBundle.js‘, jsx: ‘Scripts/App/Components‘ } };
b. 其他可能需要引用的模块
var externalLibs = [ ‘alt‘, ‘jQuery‘, ‘bootstrap‘ ];
时间: 2024-08-19 09:08:37