gulp配置,实例演示

摘要:
项目后我们需要的目录插件是:gulp-minify cssgulp concatgulp-uglifygulp-renamedel,如下图所示。项目完成后的目录结构:附加,获取package.json(Package.json位于模块的目录中,用于定义包的属性。这背后的最大原因是不需要提交此文件夹。只要有人下载了您的代码,他们就可以通过运行NPM来安装和下载所有所需的模块。您可以说这不是什么大问题。如果您检查node_modules代码使用的操作系统与您编译的模块不同,通过NPM安装?

项目完成后的目录

我们所需要的插件为:gulp-minify-css gulp-concat gulp-uglify gulp-rename del 如下图所示,完成后的项目目录结构:

gulp配置,实例演示第1张

附加,获取package.json  (package.json 位于模块的目录下,用于定义包的属性。)

方法一、可以直接拷贝放进项目文件夹

方法二、npm init (自动初始化创建)

自动生成包含

{
"name": "nodejs",
"version": "1.0.0",
"description": "ceshi",
"main": "server.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"start": "node server.js"
},
"keywords": [
"ting"
],
"author": "coco",
"license": "ISC"
}

1、第一步,创建文件夹名称 project,引用gulp

首先要确保pc上装有node,然后在global环境和项目文件中都install gulp

npm install gulp -g   (global环境)

npm install gulp --save-dev (项目环境)

2、第二步,安装需要的插件,我们所需要的插件为:gulp-minify-css gulp-concat gulp-uglify gulp-rename del

   

npm install gulp-minify-css gulp-concat gulp-uglify gulp-rename del --save-dev

3、第三步,创建gulpfile.js,将我们所用到的插件引用到我们项目中,代码如下:

var gulp = require('gulp'),
    minifycss = require('gulp-minify-css'),  //CSS压缩
    concat = require('gulp-concat'),         // 文件合并
    uglify = require('gulp-uglify'),         //js压缩插件
    rename = require('gulp-rename'),         // 重命名
    del = require('del');                    // 文件删除

任务配置开始:

// 任务名称
gulp.task('default', function() { gulp.start('clean','minifycss', 'minifyjs'); // 要执行的任务 });
//CSS压缩
gulp.task('minifycss', function() {
    return gulp.src('src/*.css')                  //压缩的文件
         .pipe(minifycss())                       //执行压缩
         .pipe(gulp.dest('minified/css'));        //输出文件夹
});
// JS 合并压缩
gulp.task('minifyjs', function() { return gulp.src('src/*.js') .pipe(concat('main.js')) //合并所有js到main.js .pipe(gulp.dest('minified/js')) //输出main.js到文件夹 .pipe(rename({suffix: '.min'})) //rename压缩后的文件名 .pipe(uglify()) //压缩 .pipe(gulp.dest('minified/js')); //输出 });
// 执行压缩前,先删除目录里的内容
gulp.task('clean', function(cb) { del(['minified/css', 'minified/js'], cb) });

 3、第四步,完成后的package.json的文件夹,显示如下:

{
  "name": "gulp_projext01",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {
    "del": "^2.2.0",
    "gulp-concat": "^2.6.0",
    "gulp-minify-css": "^1.2.4",
    "gulp": "^3.9.1",
    "gulp-rename": "^1.2.2",
    "gulp-uglify": "^1.5.3"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

贴士 1: 不要提交 node_modules 文件夹

虽然我们的话题一直是modules和npm,但是并不是不是很多人都知道,你不应该提交node_modules文件夹。这背后最大的原因是,没有必要提交这个文件夹。只要有人下载你的代码,它们可通过运行NPM来安装和下载所有需要的模块。

您可能会说,它是不是一个大问题,如果检查node_modules,但是,如果下载代码的人使用了和你编译modules不一样的操作系统的来安装通过NPM?你的应用程序将会崩溃,下载代码的人将不知道为什么会如此!

举个例子bcrypt以及sentimental如果当在您安装在主机系统上编译它们,因为它们用了本地C语言组件来编译。

避免检查node_modules文件夹的方式是加入.gitignore

node_modules

免责声明:文章转载自《gulp配置,实例演示》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇CSS背景属性[转]StructLayout特性下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

前端团队成长计划(一):基础知识梳理

一个月前我开始了前端团队的成长计划,主要主语两方面的考虑:校招应届生能快速进入工作的状态达到一个能支撑业务的技能水平,提前学习主流前端技术,为未来的业务代码重构做储备。5月是整个计划的第一个阶段,主要的任务是,梳理常规前端基础知识和开发技能。 5月的计划如下:(偏基础) 1、js和css的一些规范以及常规功能如何实现; 2、了解现有业务工程的开发,部署,上...

gulp前端自动化环境搭建详解

  1、安装 nodejs    Grunt和所有grunt插件都是基于nodejs来运行的, https://nodejs.org/    安装完成之后在终端 node -v 查看安装版本  npm -v 查看npm版本        选装cnpm 1.1、说明:因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常, 如果npm的服务器在中...

我为何放弃Gulp与Grunt,转投npm scripts(上)

本文来源于我在InfoQ中文站翻译的文章。原文地址是:http://www.infoq.com/cn/news/2016/02/gulp-grunt-npm-scripts-part1 Cory House是“Building Applications with React and Flux”与“Clean Code: Writing Code for...

转载:前端大牛们都学过哪些东西?

作者:秦墨鱼链接:http://www.zhihu.com/question/22146521/answer/94842197来源:知乎著作权归作者所有,转载请联系作者获得授权。 学过的东西杂而不精,算不得大牛。带过前端团队,也算是有几年前端负责人的经验。随着这几年前端node.js,react,Angularjs等技术新起,越来越多从之前单纯的前端开发到...

Gulp插件笔记

初次接触Gulp是出于网页模块化的需要,用过之后发现这个任务管理工具有很多实用的插件,意外地好用,于是打算写下这篇笔记把用到的Gulp插件记录一下。至于想了解Gulp基本用法的同学可以去Gulp官网查看API文档,一看便懂。 此处贴上地址https://www.gulpjs.com.cn/docs/api/ gulp-html-import API文档:...

用gulp清除、移动、压缩、合并、替换代码

之前前端代码部署时用的是grunt,后来又出了个gulp工具,最近试用了一下,很方便,感觉比grunt简单好用,下面把一些常见的任务列一下,备用。 var gulp = require('gulp'); var sdir = '0.0.1'; var ddir = '0.0.1.release'; var gutil = require('gulp-u...