Django项目 第二课 【gulp 前端项目搭建】

前端项目搭建

前端咱们使用gulp来自动化开发流程。配置好gulp后，能够自动给咱们处理好一些工做。好比写完css后，要压缩成 .min.css ，写完 js 后，要作混淆和压缩， 图片压缩等。这些工做均可以让gulp帮咱们完成

 

安装gulp

1：建立本地包管理环境：

使用npm init 命令在本地生成一个 package.json 文件，package.json 是用来记录你当前这个项目依赖了哪些包，之后别人拿到你得这个项目后，不须要你的node_modules文件夹 （由于node_modules中的包实在太庞大了）。只须要执行 npm install 命令，即会自动安装 package.json 下 devDependencies中指定的依赖包。

2：安装gulp

gulp的安装很是简单，只要使用npm命令安装便可。可是由于gulp须要做为命令行的方式运行，所以须要在安装在系统级别的目录中。

npm install gulp -g

 

由于在本地须要使用require的方式gulp。所以也须要在本地安装一份

npm install gulp --save-dev

以上的--save-dev 是将安装的包的添加到 package.json 下 devDependencies依赖中。之后经过npm install 便可自动安装。 devDependencies 这个是用来记录开发环境下使用的包，若是想要记录生产环境下使用的包，那么在安装包的时候使用 npm install xx --save 就会记录到 package.json 下的  devDependencies 中。  devDependencies是专门用来记录生成环境下的依赖包的！

 

3：建立gulp任务

要使用gulp来流程化咱们的开发工做。首先须要在项目的根目录下建立一个gulpfile.js 文件中填写一下代码：

var gulp = require("gulp");

gulp.task("greet", function() {

    console.log("hello world");
});

这里对代码一一解释：

1：经过require语句引用已经按照的第三方依赖包。这个require只能是引用当前项目的，不能引用全局下的。require语法是node.js独有的，只能在node.js 环境下使用

2：gulp.task 是用来建立一个任务。gulp.task的第一参数是命令的名字，第二个参数是一个函数，就是执行这个命令的时候会作什么事情，都是写在这个里面的

3：写完以上代码后，之后若是想要执行greet命令，那么只须要进入项目所在路径，而后终端使用gulp greet 便可执行。

 

4：建立处理CSS文件的任务

gulp只是提供一个框架给咱们。若是咱们想要实现一些更加复杂的功能，好比css压缩，那么咱们还须要安装一下 gulp-cssnano插件。gulp相关的插件安装也是经过npm命令安装，安装方式跟其余包是如出一辙 (gulp插件自己就是一个普通的包)

对css文件的处理，须要作的事情就是压缩，而后再将压缩后的文件放在指定目录下（不要和原来css文件重合了）！这里咱们使用gulp-cssnano来处理这个工做

npm install gulp-cssnano --save-dev

 

而后在gulpfile.js中写入代码

var gulp = require("gulp");
var cssnano = require("gulp-cssnano");

gulp.task("greet", function() {

console.log("hello world");
});

gulp.task("css",function () {
gulp.src("./css/*.css")
.pipe(cssnano())
.pipe(gulp.dest("./dist/css/"))
});

以上代码进行解释：

1：gulp.task: 建立一个css处理任务

2：gulp.src：找到当前css目录下全部以 .css 结尾的 css文件

3：pipe：管道方法。将上一个方法的返回结果传给另一个处理器。好比以上的 cssnano

4：gulp.dest ：将处理完后的文件，放在指定的目录下。不要放在和原文件相同的目录，以避免产生冲突，也不方便管理

 

5：修改文件名：

像以上任务，压缩完css文件后，最好是给他添加一个 .min.css 的后缀，这样一眼就能知道这个是通过压缩后的文件。这时候咱们就须要使用gulp-rename 来

修改了。固然首先也须要安装npm install gulp-rename --save-dev。示例代码以下

var gulp = require("gulp");
var cssnano = require("gulp-cssnano");
var rename = require("gulp-rename");

gulp.task("greet", function() {

    console.log("hello world");
});


gulp.task("css",function () {
    gulp.src("./css/*.css")
    .pipe(cssnano())//index.css -> index.min.css
    .pipe(rename({"suffix":".min"}))
    .pipe(gulp.dest("./dist/css/"))
});

在上述代码中，咱们班增长了一行  .pipe(rename({"suffix":".min"})) , 这个咱们就是使用rename方法，而且传递一个对象参数，指定修更名字的规制为添加一个， .min后缀名，这个gulp-rename还有其余的指定文件名的方式，好比能够在文件名前面加一个前缀等。更多的教程能够看这个: https://www.npmjs.com/package/gulp-rename